@hero-design/rn 7.20.0 → 7.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.20.0",
+  "version": "7.21.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.0",
+    "@hero-design/colors": "7.21.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",

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/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/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/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/Image/__tests__/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,81 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Image renders correctly when rounded is false 1`] = `
+<Image
+  source={
+    Object {
+      "uri": "path_to_image",
+    }
+  }
+  style={
+    Array [
+      Object {
+        "borderRadius": 0,
+        "height": 72,
+        "width": 72,
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`Image renders correctly when rounded is true 1`] = `
+<Image
+  source={
+    Object {
+      "uri": "path_to_image",
+    }
+  }
+  style={
+    Array [
+      Object {
+        "borderRadius": 36,
+        "height": 72,
+        "width": 72,
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`Image renders correctly when size is 6xlarge 1`] = `
+<Image
+  source={
+    Object {
+      "uri": "path_to_image",
+    }
+  }
+  style={
+    Array [
+      Object {
+        "borderRadius": 0,
+        "height": 72,
+        "width": 72,
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`Image renders correctly when size is 15xlarge 1`] = `
+<Image
+  source={
+    Object {
+      "uri": "path_to_image",
+    }
+  }
+  style={
+    Array [
+      Object {
+        "borderRadius": 0,
+        "height": 144,
+        "width": 144,
+      },
+      undefined,
+    ]
+  }
+/>
+`;

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import Image from '..';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+
+describe('Image', () => {
+  it.each`
+    size
+    ${'6xlarge'}
+    ${'15xlarge'}
+  `('renders correctly when size is $size', ({ size }) => {
+    const { toJSON } = renderWithTheme(
+      <Image size={size} source={{ uri: 'path_to_image' }} />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it.each`
+    rounded
+    ${true}
+    ${false}
+  `('renders correctly when rounded is $rounded', ({ rounded }) => {
+    const { toJSON } = renderWithTheme(
+      <Image rounded={rounded} source={{ uri: 'path_to_image' }} />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Image/index.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Image as RNImage } from 'react-native';
+import type { ImageProps as RNImageProps } from 'react-native';
+import { useTheme } from '../../theme';
+
+export interface ImageProps extends RNImageProps {
+  /**
+   * Whether the image is rounded.
+   */
+  rounded?: boolean;
+  /**
+   * Image sizes, following the same sizes as the `sizes` global theme.
+   */
+  size?: '6xlarge' | '15xlarge';
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const Image = ({
+  rounded = false,
+  size = '6xlarge',
+  testID,
+  style,
+  ...imageNativeProps
+}: ImageProps): JSX.Element => {
+  const theme = useTheme();
+  const imageSize = theme.__hd__.image.sizes[size];
+  return (
+    <RNImage
+      testID={testID}
+      style={[
+        {
+          width: imageSize,
+          height: imageSize,
+          borderRadius: rounded ? imageSize / 2 : 0,
+        },
+        style,
+      ]}
+      {...imageNativeProps}
+    />
+  );
+};
+
+export default Image;

package/src/components/List/__tests__/__snapshots__/ListItem.spec.tsx.snap

@@ -732,10 +732,10 @@ exports[`ListItem renders correctly ListItem with prefix suffix is React.Element
                 "backgroundColor": "#8505a2",
                 "borderRadius": 999,
                 "display": "flex",
-                "height": 28.799999999999997,
+                "height": 32,
                 "justifyContent": "center",
                 "paddingHorizontal": 4,
-                "width": 56,
+                "width": 64,
               },
               undefined,
             ]
@@ -751,9 +751,9 @@ exports[`ListItem renders correctly ListItem with prefix suffix is React.Element
               Object {
                 "backgroundColor": "#ffffff",
                 "borderRadius": 999,
-                "height": 20.8,
-                "left": 27.200000000000003,
-                "width": 20.8,
+                "height": 24,
+                "left": 32,
+                "width": 24,
               }
             }
             themeSize="medium"