@hero-design/rn 7.15.5 → 7.16.0-alpha.0

package/package.json

@@ -1,10 +1,9 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.15.5",
+  "version": "7.16.0-alpha.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
-  "react-native": "src/index.ts",
   "types": "types/index.d.ts",
   "scripts": {
     "lint": "eslint src --ext .js,.jsx,.ts,.tsx --ignore-path ../../.gitignore",
@@ -21,18 +20,18 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "7.15.5",
+    "@hero-design/colors": "7.16.0",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.9"
   },
   "peerDependencies": {
+    "@react-native-community/datetimepicker": "^3.5.2",
     "react": "17.0.2",
     "react-native": "0.65.1",
     "react-native-pager-view": "^5.4.25",
     "react-native-safe-area-context": "^4.2.5",
     "react-native-vector-icons": "^9.1.0",
-    "@react-native-community/datetimepicker": "^3.5.2",
     "react-native-webview": "^11.15.0"
   },
   "devDependencies": {

package/src/components/BottomSheet/Header.tsx

@@ -23,7 +23,7 @@ const Header = ({
   <>
     <StyledHeaderWrapper>
       {typeof content === 'string' ? (
-        <StyledHeader adjacentIcon={showCloseButton}>
+        <StyledHeader>
           <Typography.Text fontSize="large" fontWeight="semi-bold">
             {content}
           </Typography.Text>
@@ -38,6 +38,7 @@ const Header = ({
             onPress={onRequestClose}
             intent="text"
             testID="bottom-sheet-close-icon"
+            size="small"
           />
         </StyledIconWrapper>
       ) : null}

package/src/components/BottomSheet/StyledBottomSheet.tsx

@@ -1,16 +1,24 @@
 import styled from '@emotion/native';
 import { ComponentProps } from 'react';
-import { Animated, Pressable, StyleSheet, View, ViewProps } from 'react-native';
+import {
+  Animated,
+  Pressable,
+  SafeAreaView,
+  StyleSheet,
+  View,
+  ViewProps,
+} from 'react-native';
 
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+const AnimatedSafeAreaView = Animated.createAnimatedComponent(SafeAreaView);
 
 const StyledWrapper = styled(View)<ViewProps>({
   ...StyleSheet.absoluteFillObject,
   flexDirection: 'column-reverse',
 });
 
-const StyledBottomSheet = styled(Animated.View)<
-  ComponentProps<typeof Animated.View>
+const StyledBottomSheet = styled(AnimatedSafeAreaView)<
+  ComponentProps<typeof AnimatedSafeAreaView>
 >(({ theme }) => ({
   borderTopLeftRadius: theme.__hd__.bottomSheet.radii.default,
   borderTopRightRadius: theme.__hd__.bottomSheet.radii.default,
@@ -33,25 +41,20 @@ const StyledBackdrop = styled(AnimatedPressable)<
 }));
 
 const StyledHeaderWrapper = styled(View)(({ theme }) => ({
-  minHeight: theme.__hd__.bottomSheet.sizes.sectionHeight,
   flexDirection: 'row',
+  paddingVertical: theme.__hd__.bottomSheet.space.headerWrapperVerticalPadding,
+  paddingHorizontal:
+    theme.__hd__.bottomSheet.space.headerWrapperHorizontalPadding,
 }));
 
-const StyledHeader = styled(View)<{ adjacentIcon: boolean }>(
-  ({ theme, adjacentIcon }) => ({
-    flex: 1,
-    paddingLeft: theme.__hd__.bottomSheet.space.horizontalPadding,
-    paddingRight: adjacentIcon
-      ? 0
-      : theme.__hd__.bottomSheet.space.horizontalPadding,
-    paddingVertical: theme.__hd__.bottomSheet.space.verticalPadding,
-    justifyContent: 'center',
-  })
-);
+const StyledHeader = styled(View)<ViewProps>({
+  flex: 1,
+  justifyContent: 'center',
+});
 
 const StyledFooter = styled(View)<ViewProps>(({ theme }) => ({
-  paddingHorizontal: theme.__hd__.bottomSheet.space.horizontalPadding,
-  paddingVertical: theme.__hd__.bottomSheet.space.verticalPadding,
+  paddingHorizontal: theme.__hd__.bottomSheet.space.footerHorizontalPadding,
+  paddingVertical: theme.__hd__.bottomSheet.space.footerVerticalPadding,
   minHeight: theme.__hd__.bottomSheet.sizes.sectionHeight,
   alignItems: 'center',
   justifyContent: 'flex-end',
@@ -61,7 +64,9 @@ const StyledFooter = styled(View)<ViewProps>(({ theme }) => ({
 const StyledIconWrapper = styled(View)<ViewProps>(({ theme }) => ({
   alignItems: 'center',
   justifyContent: 'center',
-  width: theme.__hd__.bottomSheet.sizes.closeIconWidth,
+  width: theme.__hd__.bottomSheet.sizes.closeIcon,
+  height: theme.__hd__.bottomSheet.sizes.closeIcon,
+  marginLeft: theme.__hd__.bottomSheet.space.closeIconMargin,
 }));
 
 export {

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

@@ -49,8 +49,9 @@ exports[`BottomSheet renders correctly with close state 1`] = `
         }
       }
     />
-    <View
+    <RCTSafeAreaView
       collapsable={false}
+      emulateUnlessSupported={true}
       nativeID="animatedComponent"
       onLayout={[Function]}
       style={
@@ -84,22 +85,19 @@ exports[`BottomSheet renders correctly with close state 1`] = `
           Array [
             Object {
               "flexDirection": "row",
-              "minHeight": 64,
+              "paddingHorizontal": 16,
+              "paddingVertical": 8,
             },
             undefined,
           ]
         }
       >
         <View
-          adjacentIcon={true}
           style={
             Array [
               Object {
                 "flex": 1,
                 "justifyContent": "center",
-                "paddingLeft": 24,
-                "paddingRight": 0,
-                "paddingVertical": 8,
               },
               undefined,
             ]
@@ -130,8 +128,10 @@ exports[`BottomSheet renders correctly with close state 1`] = `
             Array [
               Object {
                 "alignItems": "center",
+                "height": 48,
                 "justifyContent": "center",
-                "width": 72,
+                "marginLeft": 12,
+                "width": 48,
               },
               undefined,
             ]
@@ -162,13 +162,13 @@ exports[`BottomSheet renders correctly with close state 1`] = `
                 Array [
                   Object {
                     "color": "#292a2b",
-                    "fontSize": 24,
+                    "fontSize": 20,
                   },
                   undefined,
                 ]
               }
               themeIntent="text"
-              themeSize="medium"
+              themeSize="small"
             />
           </View>
         </View>
@@ -209,7 +209,7 @@ exports[`BottomSheet renders correctly with close state 1`] = `
                 "flexDirection": "row",
                 "justifyContent": "flex-end",
                 "minHeight": 64,
-                "paddingHorizontal": 24,
+                "paddingHorizontal": 12,
                 "paddingVertical": 8,
               },
               undefined,
@@ -260,7 +260,7 @@ exports[`BottomSheet renders correctly with close state 1`] = `
           </View>
         </View>
       </View>
-    </View>
+    </RCTSafeAreaView>
   </View>
 </Modal>
 `;
@@ -314,8 +314,9 @@ exports[`BottomSheet renders correctly with open state 1`] = `
         }
       }
     />
-    <View
+    <RCTSafeAreaView
       collapsable={false}
+      emulateUnlessSupported={true}
       nativeID="animatedComponent"
       onLayout={[Function]}
       style={
@@ -349,22 +350,19 @@ exports[`BottomSheet renders correctly with open state 1`] = `
           Array [
             Object {
               "flexDirection": "row",
-              "minHeight": 64,
+              "paddingHorizontal": 16,
+              "paddingVertical": 8,
             },
             undefined,
           ]
         }
       >
         <View
-          adjacentIcon={true}
           style={
             Array [
               Object {
                 "flex": 1,
                 "justifyContent": "center",
-                "paddingLeft": 24,
-                "paddingRight": 0,
-                "paddingVertical": 8,
               },
               undefined,
             ]
@@ -395,8 +393,10 @@ exports[`BottomSheet renders correctly with open state 1`] = `
             Array [
               Object {
                 "alignItems": "center",
+                "height": 48,
                 "justifyContent": "center",
-                "width": 72,
+                "marginLeft": 12,
+                "width": 48,
               },
               undefined,
             ]
@@ -427,13 +427,13 @@ exports[`BottomSheet renders correctly with open state 1`] = `
                 Array [
                   Object {
                     "color": "#292a2b",
-                    "fontSize": 24,
+                    "fontSize": 20,
                   },
                   undefined,
                 ]
               }
               themeIntent="text"
-              themeSize="medium"
+              themeSize="small"
             />
           </View>
         </View>
@@ -474,7 +474,7 @@ exports[`BottomSheet renders correctly with open state 1`] = `
                 "flexDirection": "row",
                 "justifyContent": "flex-end",
                 "minHeight": 64,
-                "paddingHorizontal": 24,
+                "paddingHorizontal": 12,
                 "paddingVertical": 8,
               },
               undefined,
@@ -525,7 +525,7 @@ exports[`BottomSheet renders correctly with open state 1`] = `
           </View>
         </View>
       </View>
-    </View>
+    </RCTSafeAreaView>
   </View>
 </Modal>
 `;

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap

@@ -276,8 +276,9 @@ exports[`DatePickerIOS renders correctly 1`] = `
                 }
               }
             />
-            <View
+            <RCTSafeAreaView
               collapsable={false}
+              emulateUnlessSupported={true}
               nativeID="animatedComponent"
               onLayout={[Function]}
               style={
@@ -311,22 +312,19 @@ exports[`DatePickerIOS renders correctly 1`] = `
                   Array [
                     Object {
                       "flexDirection": "row",
-                      "minHeight": 64,
+                      "paddingHorizontal": 16,
+                      "paddingVertical": 8,
                     },
                     undefined,
                   ]
                 }
               >
                 <View
-                  adjacentIcon={true}
                   style={
                     Array [
                       Object {
                         "flex": 1,
                         "justifyContent": "center",
-                        "paddingLeft": 24,
-                        "paddingRight": 0,
-                        "paddingVertical": 8,
                       },
                       undefined,
                     ]
@@ -357,8 +355,10 @@ exports[`DatePickerIOS renders correctly 1`] = `
                     Array [
                       Object {
                         "alignItems": "center",
+                        "height": 48,
                         "justifyContent": "center",
-                        "width": 72,
+                        "marginLeft": 12,
+                        "width": 48,
                       },
                       undefined,
                     ]
@@ -389,13 +389,13 @@ exports[`DatePickerIOS renders correctly 1`] = `
                         Array [
                           Object {
                             "color": "#292a2b",
-                            "fontSize": 24,
+                            "fontSize": 20,
                           },
                           undefined,
                         ]
                       }
                       themeIntent="text"
-                      themeSize="medium"
+                      themeSize="small"
                     />
                   </View>
                 </View>
@@ -456,7 +456,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
                         "flexDirection": "row",
                         "justifyContent": "flex-end",
                         "minHeight": 64,
-                        "paddingHorizontal": 24,
+                        "paddingHorizontal": 12,
                         "paddingVertical": 8,
                       },
                       undefined,
@@ -503,7 +503,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
                   </View>
                 </View>
               </View>
-            </View>
+            </RCTSafeAreaView>
           </View>
         </View>
       </View>

package/src/components/Icon/AnimatedIcon.tsx

@@ -0,0 +1,46 @@
+import React, { useEffect, useRef, ComponentProps } from 'react';
+import { Animated, Easing } from 'react-native';
+import StyledHeroIcon from './HeroIcon';
+
+type AnimatedIconProps = ComponentProps<typeof StyledHeroIcon>;
+
+const AnimatedIcon = ({ style, ...otherProps }: AnimatedIconProps) => {
+  const rotateAnimation = useRef<Animated.Value>(new Animated.Value(0));
+
+  useEffect(() => {
+    const animation = Animated.loop(
+      Animated.timing(rotateAnimation.current, {
+        toValue: 1,
+        duration: 1000,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      })
+    );
+
+    animation.start();
+
+    return () => {
+      animation.stop();
+    };
+  }, []);
+
+  const interpolatedRotateAnimation = rotateAnimation.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  });
+
+  return (
+    <Animated.View
+      style={[
+        {
+          transform: [{ rotate: interpolatedRotateAnimation }],
+        },
+        style,
+      ]}
+    >
+      <StyledHeroIcon {...otherProps} />
+    </Animated.View>
+  );
+};
+
+export default AnimatedIcon;