@hero-design/rn 7.20.1 → 7.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.20.1",
+  "version": "7.22.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,13 +20,14 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "7.20.1",
+    "@hero-design/colors": "7.22.0",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.9"
   },
   "peerDependencies": {
     "@react-native-community/datetimepicker": "^3.5.2",
+    "@react-native-community/slider": "4.1.12",
     "react": "17.0.2",
     "react-native": "0.65.1",
     "react-native-pager-view": "^5.4.25",
@@ -42,6 +43,7 @@
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
     "@react-native-community/datetimepicker": "^3.5.2",
+    "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-json": "^4.1.0",
@@ -54,19 +56,9 @@
     "@types/react": "^17.0.39",
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
-    "@typescript-eslint/eslint-plugin": "^5.12.1",
-    "@typescript-eslint/parser": "^5.12.1",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint": "^8.9.0",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.28.0",
-    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-config-hd": "7.22.0",
     "jest": "^27.3.1",
-    "prettier": "^2.5.1",
     "react": "17.0.2",
     "react-native": "0.65.1",
     "react-native-pager-view": "^5.4.25",
@@ -77,6 +69,8 @@
     "rollup": "^2.68.0",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-flow": "^1.1.1",
-    "ts-jest": "^27.0.7"
-  }
+    "ts-jest": "^27.0.7",
+    "prettier-config-hd": "7.22.0"
+  },
+  "prettier": "prettier-config-hd"
 }

package/rollup.config.js

@@ -28,6 +28,7 @@ export default {
     'react-native',
     'react-native-safe-area-context',
     '@react-native-community/datetimepicker',
+    '@react-native-community/slider',
     'react-native-webview',
     'react-native-pager-view',
     'react-native-vector-icons',

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

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

package/src/components/BottomNavigation/index.tsx

@@ -80,13 +80,13 @@ const BottomNavigation = ({
 
   if (!loaded.includes(selectedTabKey)) {
     // Set the current tab to be loaded if it was not loaded before
-    setLoaded(loadedState => [...loadedState, selectedTabKey]);
+    setLoaded((loadedState) => [...loadedState, selectedTabKey]);
   }
 
   return (
     <BottomNavigationContainer {...nativeProps}>
       <ContentWrapper>
-        {tabs.map(tab => {
+        {tabs.map((tab) => {
           const { key, component, testID } = tab;
           const active = selectedTabKey === key;
 
@@ -123,7 +123,7 @@ const BottomNavigation = ({
       </ContentWrapper>
       <BottomBarWrapper themeInsets={insets}>
         <BottomBar>
-          {tabs.map(tab => {
+          {tabs.map((tab) => {
             const { key, icon, title, testID } = tab;
             const active = selectedTabKey === key;
             const inactiveIcon = getInactiveIcon(icon);

package/src/components/BottomSheet/index.tsx

@@ -27,6 +27,10 @@ interface BottomSheetProps {
    * Bottom sheet's content.
    */
   children?: ReactNode;
+  /**
+   * Callback is called when the Bottom Sheet finishes running animation.
+   */
+  onAnimationEnd?: () => void;
   /**
    * Callback is called when the Bottom Sheet is opened.
    */
@@ -67,6 +71,7 @@ const BottomSheet = ({
   header,
   footer,
   children,
+  onAnimationEnd,
   onOpen,
   onRequestClose,
   onDismiss,
@@ -109,7 +114,7 @@ const BottomSheet = ({
       useNativeDriver: true,
     });
 
-    animation.start();
+    animation.start(onAnimationEnd);
 
     return () => animation.stop();
   }, [open]);

package/src/components/Box/helpers.ts

@@ -1,6 +1,6 @@
 export const pick = (keys: Array<string>, props: Record<string, any>) =>
   keys
-    .filter(key => key in props)
+    .filter((key) => key in props)
     .reduce(
       (result, cur) => ({
         ...result,

package/src/components/Calendar/index.tsx

@@ -101,7 +101,7 @@ const Calendar = ({
   const lastDayIndexOfCurrentMonth = lastDateOfMonth.getDate();
   const lastDayIndexOfPreviousMonth = lastDateOfPreviousMonth.getDate();
 
-  const daysOfPreviousMonth = initArray(firstDayWeekIndexOfMonth, index => {
+  const daysOfPreviousMonth = initArray(firstDayWeekIndexOfMonth, (index) => {
     const reversedIndex = firstDayWeekIndexOfMonth - index - 1;
     const count = lastDayIndexOfPreviousMonth - reversedIndex;
     return getValidDate(
@@ -111,7 +111,7 @@ const Calendar = ({
     );
   });
 
-  const daysOfCurrentMonth = initArray(lastDayIndexOfCurrentMonth, index =>
+  const daysOfCurrentMonth = initArray(lastDayIndexOfCurrentMonth, (index) =>
     getValidDate(
       new Date(currentYear, currentMonth, index + 1),
       minDate,
@@ -122,7 +122,7 @@ const Calendar = ({
   const daysOfNextMonth = initArray(
     TOTAL_DATES_ITEMS -
       (daysOfPreviousMonth.length + daysOfCurrentMonth.length),
-    index =>
+    (index) =>
       getValidDate(
         new Date(currentYear, currentMonth + 1, index + 1),
         minDate,
@@ -133,13 +133,13 @@ const Calendar = ({
   const disablePrevButton =
     minDate === undefined
       ? false
-      : !daysOfPreviousMonth.some(date => date !== undefined) &&
+      : !daysOfPreviousMonth.some((date) => date !== undefined) &&
         minDate >= firstDateOfMonth;
 
   const disableNextButton =
     maxDate === undefined
       ? false
-      : !daysOfNextMonth.some(date => date !== undefined) ||
+      : !daysOfNextMonth.some((date) => date !== undefined) ||
         maxDate <= lastDateOfMonth;
 
   return (
@@ -156,7 +156,7 @@ const Calendar = ({
         />
       </StyledCalendarHeader>
       <StyledCalendarRow>
-        {DAYS_OF_WEEK.map(day => (
+        {DAYS_OF_WEEK.map((day) => (
           <StyledCalendarRowItem key={day}>
             <StyledCalendarDayNameCell>
               <Typography.Text>{day}</Typography.Text>
@@ -165,7 +165,7 @@ const Calendar = ({
         ))}
       </StyledCalendarRow>
       <StyledCalendarRow>
-        {daysOfPreviousMonth.map(date =>
+        {daysOfPreviousMonth.map((date) =>
           date ? (
             <CalendarRowItem
               key={date.toDateString()}
@@ -180,7 +180,7 @@ const Calendar = ({
             <StyledDisabledCalendarRowItem testID="calendar-disabled-cell" />
           )
         )}
-        {daysOfCurrentMonth.map(date =>
+        {daysOfCurrentMonth.map((date) =>
           date ? (
             <CalendarRowItem
               key={date.toDateString()}
@@ -194,7 +194,7 @@ const Calendar = ({
             <StyledDisabledCalendarRowItem testID="calendar-disabled-cell" />
           )
         )}
-        {daysOfNextMonth.map(date =>
+        {daysOfNextMonth.map((date) =>
           date ? (
             <CalendarRowItem
               key={date.toDateString()}

package/src/components/Checkbox/__tests__/__snapshots__/StyledCheckbox.spec.tsx.snap

@@ -9,10 +9,10 @@ exports[`StyledCheckbox renders correctly when disabled is false 1`] = `
         "borderRadius": 4,
         "borderWidth": 2,
         "flexDirection": "row",
-        "height": 20,
+        "height": 24,
         "justifyContent": "center",
         "overflow": "hidden",
-        "width": 20,
+        "width": 24,
       },
       undefined,
     ]
@@ -30,10 +30,10 @@ exports[`StyledCheckbox renders correctly when disabled is true 1`] = `
         "borderRadius": 4,
         "borderWidth": 2,
         "flexDirection": "row",
-        "height": 20,
+        "height": 24,
         "justifyContent": "center",
         "overflow": "hidden",
-        "width": 20,
+        "width": 24,
       },
       undefined,
     ]

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

@@ -28,10 +28,10 @@ exports[`Checkbox renders correctly when checked is false and there is no descri
           "borderRadius": 4,
           "borderWidth": 2,
           "flexDirection": "row",
-          "height": 20,
+          "height": 24,
           "justifyContent": "center",
           "overflow": "hidden",
-          "width": 20,
+          "width": 24,
         },
         undefined,
       ]
@@ -69,10 +69,10 @@ exports[`Checkbox renders correctly when checked is true and there is no descrip
           "borderRadius": 4,
           "borderWidth": 2,
           "flexDirection": "row",
-          "height": 20,
+          "height": 24,
           "justifyContent": "center",
           "overflow": "hidden",
-          "width": 20,
+          "width": 24,
         },
         undefined,
       ]
@@ -90,7 +90,7 @@ exports[`Checkbox renders correctly when checked is true and there is no descrip
           Array [
             Object {
               "position": "absolute",
-              "top": -3,
+              "top": 0,
             },
             undefined,
           ],
@@ -157,10 +157,10 @@ exports[`Checkbox renders correctly when disabled is false, withBorder is false
           "borderRadius": 4,
           "borderWidth": 2,
           "flexDirection": "row",
-          "height": 20,
+          "height": 24,
           "justifyContent": "center",
           "overflow": "hidden",
-          "width": 20,
+          "width": 24,
         },
         undefined,
       ]
@@ -227,10 +227,10 @@ exports[`Checkbox renders correctly when disabled is false, withBorder is true 1
           "borderRadius": 4,
           "borderWidth": 2,
           "flexDirection": "row",
-          "height": 20,
+          "height": 24,
           "justifyContent": "center",
           "overflow": "hidden",
-          "width": 20,
+          "width": 24,
         },
         undefined,
       ]
@@ -293,10 +293,10 @@ exports[`Checkbox renders correctly when disabled is true, withBorder is false 1
           "borderRadius": 4,
           "borderWidth": 2,
           "flexDirection": "row",
-          "height": 20,
+          "height": 24,
           "justifyContent": "center",
           "overflow": "hidden",
-          "width": 20,
+          "width": 24,
         },
         undefined,
       ]
@@ -363,10 +363,10 @@ exports[`Checkbox renders correctly when disabled is true, withBorder is true 1`
           "borderRadius": 4,
           "borderWidth": 2,
           "flexDirection": "row",
-          "height": 20,
+          "height": 24,
           "justifyContent": "center",
           "overflow": "hidden",
-          "width": 20,
+          "width": 24,
         },
         undefined,
       ]

package/src/components/Collapse/index.tsx

@@ -60,7 +60,7 @@ const Collapse = ({ open = false, children, testID, style }: CollapseProps) => {
     >
       <StyledHiddenWrapper>
         <StyledChildWrapper
-          onLayout={event => fetchMaxHeight(event.nativeEvent.layout)}
+          onLayout={(event) => fetchMaxHeight(event.nativeEvent.layout)}
           style={style}
         >
           {children}

package/src/components/Drawer/DragableDrawer/helpers.ts

@@ -16,9 +16,11 @@ export const calculateSnapPointsData = (
   height: number,
   snapPoints: number[]
 ): SnapPointsData => {
-  const filteredSnapPoints = snapPoints.filter(value => value >= minimumHeight);
+  const filteredSnapPoints = snapPoints.filter(
+    (value) => value >= minimumHeight
+  );
   const snapPointsOffsetValues = [minimumHeight, ...filteredSnapPoints].map(
-    value => getOffset(height, value)
+    (value) => getOffset(height, value)
   );
   const uniqSnapPointOffsetValues = Array.from(
     new Set([...snapPointsOffsetValues, 0])
@@ -35,7 +37,9 @@ export const calculateAnimatedToValue = (
   position: number,
   heightSnapPoints: number[]
 ) => {
-  const distances = heightSnapPoints.map(height => Math.abs(position - height));
+  const distances = heightSnapPoints.map((height) =>
+    Math.abs(position - height)
+  );
 
   const minIndex = distances.indexOf(Math.min(...distances));
   return heightSnapPoints[minIndex];

package/src/components/Empty/StyledEmpty.tsx

@@ -12,14 +12,6 @@ const StyledWrapper = styled(View)(({ theme }) => ({
   padding: theme.__hd__.empty.space.wrapperPadding,
 }));
 
-const StyledIllustration = styled(View)(({ theme }) => ({
-  height: theme.__hd__.empty.sizes.illustration,
-  width: theme.__hd__.empty.sizes.illustration,
-  borderRadius: theme.__hd__.empty.radii.illustration,
-  backgroundColor: theme.__hd__.empty.colors.illustrationBackground,
-  marginBottom: theme.__hd__.empty.space.illustrationMargin,
-}));
-
 const StyledTitle = styled(Text)<{ themeVariant: ThemeVariant }>(
   ({ theme, themeVariant }) => ({
     fontFamily: theme.__hd__.empty.fonts.title,
@@ -45,4 +37,4 @@ const StyledDescription = styled(Text)<{ themeVariant: ThemeVariant }>(
   })
 );
 
-export { StyledWrapper, StyledIllustration, StyledTitle, StyledDescription };
+export { StyledWrapper, StyledTitle, StyledDescription };

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

@@ -16,15 +16,68 @@ exports[`Empty renders empty state content correctly 1`] = `
     ]
   }
 >
-  <View
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 28,
+          "marginBottom": 16,
+          "textAlign": "center",
+        },
+        undefined,
+      ]
+    }
+    themeVariant="light"
+  >
+    You have no notification at this time
+  </Text>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#4d6265",
+          "fontFamily": "BeVietnamPro-Light",
+          "fontSize": 16,
+          "textAlign": "center",
+        },
+        undefined,
+      ]
+    }
+    themeVariant="light"
+  >
+    We'll notify you later.
+  </Text>
+</View>
+`;
+
+exports[`Empty renders empty state with image correctly 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "display": "flex",
+        "flex": 1,
+        "flexDirection": "column",
+        "justifyContent": "center",
+        "padding": 16,
+      },
+      undefined,
+    ]
+  }
+>
+  <Image
+    source={
+      Object {
+        "uri": "path_to_image",
+      }
+    }
     style={
       Array [
         Object {
-          "backgroundColor": "#ccced1",
-          "borderRadius": 999,
-          "height": 168,
           "marginBottom": 24,
-          "width": 168,
         },
         undefined,
       ]

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Image } from 'react-native';
 
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Empty from '..';
@@ -14,4 +15,16 @@ describe('Empty', () => {
 
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it('renders empty state with image correctly', () => {
+    const { toJSON } = renderWithTheme(
+      <Empty
+        image={<Image source={{ uri: 'path_to_image' }} />}
+        title="You have no notification at this time"
+        description="We'll notify you later."
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
 });

package/src/components/Empty/index.tsx

@@ -1,13 +1,20 @@
 import React from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
-import {
-  StyledWrapper,
-  StyledIllustration,
-  StyledTitle,
-  StyledDescription,
-} from './StyledEmpty';
+import type { ReactElement } from 'react';
+import type {
+  StyleProp,
+  ViewStyle,
+  ImageProps as RNImageProps,
+} from 'react-native';
+
+import { useTheme } from '../../theme';
+import { ImageProps } from '../Image';
+import { StyledWrapper, StyledTitle, StyledDescription } from './StyledEmpty';
 
 interface EmptyProps {
+  /**
+   * Image to be displayed.
+   */
+  image?: ReactElement<ImageProps | RNImageProps>;
   /**
    * Empty's title.
    */
@@ -32,21 +39,34 @@ interface EmptyProps {
 }
 
 const Empty = ({
+  image,
   title,
   description,
   style,
   testID,
   variant = 'light',
-}: EmptyProps): JSX.Element => (
-  <StyledWrapper style={style} testID={testID}>
-    <StyledIllustration />
-    <StyledTitle themeVariant={variant}>{title}</StyledTitle>
-    {!!description && (
-      <StyledDescription themeVariant={variant}>
-        {description}
-      </StyledDescription>
-    )}
-  </StyledWrapper>
-);
+}: EmptyProps): JSX.Element => {
+  const theme = useTheme();
+  return (
+    <StyledWrapper style={style} testID={testID}>
+      {image !== undefined &&
+        React.cloneElement(image, {
+          ...image.props,
+          style: [
+            {
+              marginBottom: theme.__hd__.empty.space.imageMargin,
+            },
+            image.props.style,
+          ],
+        })}
+      <StyledTitle themeVariant={variant}>{title}</StyledTitle>
+      {!!description && (
+        <StyledDescription themeVariant={variant}>
+          {description}
+        </StyledDescription>
+      )}
+    </StyledWrapper>
+  );
+};
 
 export default Empty;

package/src/components/FAB/ActionGroup/index.tsx

@@ -21,7 +21,7 @@ const ActionItemsListComponent = ({
   items,
 }: ActionItemsContainerProps) => (
   <View style={style}>
-    {items?.map(itemProp => (
+    {items?.map((itemProp) => (
       <ActionItem key={itemProp.icon} {...itemProp} />
     ))}
   </View>