@hero-design/rn 8.9.0 → 8.9.1

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
-@hero-design/rn:build: cache hit, replaying output 78487fe2f2a69692
+@hero-design/rn:build: cache hit, replaying output 598a53bbbdfa05fc
 @hero-design/rn:build: $ yarn build:js && yarn build:types
 @hero-design/rn:build: $ rollup -c
 @hero-design/rn:build: 
 @hero-design/rn:build: src/index.ts → lib/index.js, es/index.js...
 @hero-design/rn:build: (!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
 @hero-design/rn:build: (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/root/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
-@hero-design/rn:build: created lib/index.js, es/index.js in 26s
+@hero-design/rn:build: created lib/index.js, es/index.js in 23.5s
 @hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/es/index.js

@@ -10675,7 +10675,7 @@ var StyledPageControl = index$a(PageControl)({
 });
 
 function isCarouselImageProps(image) {
-  return typeof image !== 'string';
+  return _typeof(image) === 'object';
 }
 var CarouselItem = function CarouselItem(_ref) {
   var width = _ref.width,
@@ -10693,9 +10693,9 @@ var CarouselItem = function CarouselItem(_ref) {
     width: image.width,
     resizeMode: image.resizeMode
   }) : /*#__PURE__*/React.createElement(StyledCarouselImage, {
-    source: {
+    source: typeof image === 'string' ? {
       uri: image
-    }
+    } : image
   })), /*#__PURE__*/React.createElement(StyledCarouselContentWrapper, {
     paddingHorizontal: "large",
     marginTop: "large",

package/lib/index.js

@@ -10704,7 +10704,7 @@ var StyledPageControl = index$a(PageControl)({
 });
 
 function isCarouselImageProps(image) {
-  return typeof image !== 'string';
+  return _typeof(image) === 'object';
 }
 var CarouselItem = function CarouselItem(_ref) {
   var width = _ref.width,
@@ -10722,9 +10722,9 @@ var CarouselItem = function CarouselItem(_ref) {
     width: image.width,
     resizeMode: image.resizeMode
   }) : /*#__PURE__*/React__default["default"].createElement(StyledCarouselImage, {
-    source: {
+    source: typeof image === 'string' ? {
       uri: image
-    }
+    } : image
   })), /*#__PURE__*/React__default["default"].createElement(StyledCarouselContentWrapper, {
     paddingHorizontal: "large",
     marginTop: "large",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.9.0",
+  "version": "8.9.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.9.0",
+    "@hero-design/colors": "8.9.1",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21"
@@ -44,7 +44,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.9.0",
+    "@hero-design/eslint-plugin": "8.9.1",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -60,9 +60,9 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "8.9.0",
+    "eslint-config-hd": "8.9.1",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.9.0",
+    "prettier-config-hd": "8.9.1",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.1.0",

package/src/components/Carousel/CarouselItem.tsx

@@ -16,7 +16,7 @@ interface CarouselItemProps extends Omit<CarouselData, 'background'> {
 function isCarouselImageProps(
   image: CarouselImageProps | string
 ): image is CarouselImageProps {
-  return typeof image !== 'string';
+  return typeof image === 'object';
 }
 
 const CarouselItem = ({
@@ -37,7 +37,9 @@ const CarouselItem = ({
             resizeMode={image.resizeMode}
           />
         ) : (
-          <StyledCarouselImage source={{ uri: image }} />
+          <StyledCarouselImage
+            source={typeof image === 'string' ? { uri: image } : image}
+          />
         ))}
 
       <StyledCarouselContentWrapper

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

@@ -39,7 +39,7 @@ exports[`Carousel renders basic carousel 1`] = `
             "background": "#ece8ef",
             "body": "Access your Work, Money and Benefits in the palm of your hand.",
             "heading": "Welcome to the new Employment Hero app",
-            "image": "https://picsum.photos/800/1200",
+            "image": 1,
           },
           Object {
             "background": "#ccd2d3",
@@ -58,7 +58,21 @@ exports[`Carousel renders basic carousel 1`] = `
             "background": "#ccd2d3",
             "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae pulvinar quam, ac facilisis massa. Aliquam facilisis nisi eu justo dignissim, vel tempus justo iaculis.",
             "heading": "Easier to get around",
-            "image": "https://picsum.photos/800/1200",
+            "image": Object {
+              "height": 100,
+              "resizeMode": "cover",
+              "uri": "https://picsum.photos/1200/800",
+              "width": 30,
+            },
+          },
+          Object {
+            "background": "#ccd2d3",
+            "heading": "Test slide 4",
+            "image": Object {
+              "height": 100,
+              "uri": "https://picsum.photos/1200/800",
+              "width": 30,
+            },
           },
         ]
       }
@@ -119,11 +133,7 @@ exports[`Carousel renders basic carousel 1`] = `
             }
           >
             <Image
-              source={
-                Object {
-                  "uri": "https://picsum.photos/800/1200",
-                }
-              }
+              source={1}
               style={
                 Array [
                   Object {
@@ -370,9 +380,14 @@ exports[`Carousel renders basic carousel 1`] = `
             }
           >
             <Image
+              height={100}
+              resizeMode="cover"
               source={
                 Object {
-                  "uri": "https://picsum.photos/800/1200",
+                  "height": 100,
+                  "resizeMode": "cover",
+                  "uri": "https://picsum.photos/1200/800",
+                  "width": 30,
                 }
               }
               style={
@@ -384,14 +399,16 @@ exports[`Carousel renders basic carousel 1`] = `
                   },
                   Array [
                     Object {
-                      "flex": 1,
-                      "resizeMode": "contain",
-                      "width": "100%",
+                      "alignSelf": "center",
+                      "height": 100,
+                      "resizeMode": "cover",
+                      "width": 30,
                     },
                     undefined,
                   ],
                 ]
               }
+              width={30}
             />
             <View
               marginTop="large"
@@ -465,6 +482,108 @@ exports[`Carousel renders basic carousel 1`] = `
             </View>
           </View>
         </View>
+        <View
+          onLayout={[Function]}
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+              null,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {},
+                Object {
+                  "width": 750,
+                },
+              ]
+            }
+          >
+            <Image
+              height={100}
+              source={
+                Object {
+                  "height": 100,
+                  "uri": "https://picsum.photos/1200/800",
+                  "width": 30,
+                }
+              }
+              style={
+                Array [
+                  Object {
+                    "borderRadius": 0,
+                    "height": 72,
+                    "width": 72,
+                  },
+                  Array [
+                    Object {
+                      "alignSelf": "center",
+                      "height": 100,
+                      "resizeMode": "contain",
+                      "width": 30,
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+              width={30}
+            />
+            <View
+              marginTop="large"
+              paddingHorizontal="large"
+              style={
+                Array [
+                  Object {
+                    "marginTop": 24,
+                    "paddingHorizontal": 24,
+                  },
+                  Array [
+                    Object {
+                      "minHeight": 250,
+                      "width": 750,
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+              width={750}
+            >
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 14,
+                      "letterSpacing": 0.42,
+                      "lineHeight": 22,
+                    },
+                    Array [
+                      Object {
+                        "fontFamily": "RebondGrotesque-SemiBold",
+                        "fontSize": 32,
+                        "lineHeight": 44,
+                        "marginBottom": 16,
+                        "marginTop": 8,
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
+                themeFontSize="medium"
+                themeFontWeight="regular"
+                themeIntent="body"
+                themeTypeface="neutral"
+              >
+                Test slide 4
+              </Text>
+            </View>
+          </View>
+        </View>
       </View>
     </RCTScrollView>
     <View
@@ -603,6 +722,20 @@ exports[`Carousel renders basic carousel 1`] = `
           }
           testID="page-control-indicator2"
         />
+        <View
+          collapsable={false}
+          style={
+            Object {
+              "backgroundColor": "#401960",
+              "borderRadius": 999,
+              "height": 8,
+              "marginHorizontal": 8,
+              "opacity": 0.5,
+              "width": 8,
+            }
+          }
+          testID="page-control-indicator3"
+        />
       </View>
     </View>
   </View>
@@ -648,7 +781,7 @@ exports[`Carousel should call skip call back when press skip 1`] = `
             "background": "#ece8ef",
             "body": "Access your Work, Money and Benefits in the palm of your hand.",
             "heading": "Welcome to the new Employment Hero app",
-            "image": "https://picsum.photos/800/1200",
+            "image": 1,
           },
           Object {
             "background": "#ccd2d3",
@@ -667,7 +800,21 @@ exports[`Carousel should call skip call back when press skip 1`] = `
             "background": "#ccd2d3",
             "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae pulvinar quam, ac facilisis massa. Aliquam facilisis nisi eu justo dignissim, vel tempus justo iaculis.",
             "heading": "Easier to get around",
-            "image": "https://picsum.photos/800/1200",
+            "image": Object {
+              "height": 100,
+              "resizeMode": "cover",
+              "uri": "https://picsum.photos/1200/800",
+              "width": 30,
+            },
+          },
+          Object {
+            "background": "#ccd2d3",
+            "heading": "Test slide 4",
+            "image": Object {
+              "height": 100,
+              "uri": "https://picsum.photos/1200/800",
+              "width": 30,
+            },
           },
         ]
       }
@@ -728,11 +875,7 @@ exports[`Carousel should call skip call back when press skip 1`] = `
             }
           >
             <Image
-              source={
-                Object {
-                  "uri": "https://picsum.photos/800/1200",
-                }
-              }
+              source={1}
               style={
                 Array [
                   Object {
@@ -979,9 +1122,14 @@ exports[`Carousel should call skip call back when press skip 1`] = `
             }
           >
             <Image
+              height={100}
+              resizeMode="cover"
               source={
                 Object {
-                  "uri": "https://picsum.photos/800/1200",
+                  "height": 100,
+                  "resizeMode": "cover",
+                  "uri": "https://picsum.photos/1200/800",
+                  "width": 30,
                 }
               }
               style={
@@ -993,14 +1141,16 @@ exports[`Carousel should call skip call back when press skip 1`] = `
                   },
                   Array [
                     Object {
-                      "flex": 1,
-                      "resizeMode": "contain",
-                      "width": "100%",
+                      "alignSelf": "center",
+                      "height": 100,
+                      "resizeMode": "cover",
+                      "width": 30,
                     },
                     undefined,
                   ],
                 ]
               }
+              width={30}
             />
             <View
               marginTop="large"
@@ -1074,6 +1224,108 @@ exports[`Carousel should call skip call back when press skip 1`] = `
             </View>
           </View>
         </View>
+        <View
+          onLayout={[Function]}
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+              null,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {},
+                Object {
+                  "width": 750,
+                },
+              ]
+            }
+          >
+            <Image
+              height={100}
+              source={
+                Object {
+                  "height": 100,
+                  "uri": "https://picsum.photos/1200/800",
+                  "width": 30,
+                }
+              }
+              style={
+                Array [
+                  Object {
+                    "borderRadius": 0,
+                    "height": 72,
+                    "width": 72,
+                  },
+                  Array [
+                    Object {
+                      "alignSelf": "center",
+                      "height": 100,
+                      "resizeMode": "contain",
+                      "width": 30,
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+              width={30}
+            />
+            <View
+              marginTop="large"
+              paddingHorizontal="large"
+              style={
+                Array [
+                  Object {
+                    "marginTop": 24,
+                    "paddingHorizontal": 24,
+                  },
+                  Array [
+                    Object {
+                      "minHeight": 250,
+                      "width": 750,
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+              width={750}
+            >
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 14,
+                      "letterSpacing": 0.42,
+                      "lineHeight": 22,
+                    },
+                    Array [
+                      Object {
+                        "fontFamily": "RebondGrotesque-SemiBold",
+                        "fontSize": 32,
+                        "lineHeight": 44,
+                        "marginBottom": 16,
+                        "marginTop": 8,
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
+                themeFontSize="medium"
+                themeFontWeight="regular"
+                themeIntent="body"
+                themeTypeface="neutral"
+              >
+                Test slide 4
+              </Text>
+            </View>
+          </View>
+        </View>
       </View>
     </RCTScrollView>
     <View
@@ -1212,6 +1464,20 @@ exports[`Carousel should call skip call back when press skip 1`] = `
           }
           testID="page-control-indicator2"
         />
+        <View
+          collapsable={false}
+          style={
+            Object {
+              "backgroundColor": "#401960",
+              "borderRadius": 999,
+              "height": 8,
+              "marginHorizontal": 8,
+              "opacity": 0.5,
+              "width": 8,
+            }
+          }
+          testID="page-control-indicator3"
+        />
       </View>
     </View>
   </View>

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { fireEvent } from '@testing-library/react-native';
-
+import { ImageResizeMode } from 'react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Carousel from '..';
 import Image from '../../Image';
@@ -9,7 +9,7 @@ import Button from '../../Button/Button';
 
 const carouselData = [
   {
-    image: 'https://picsum.photos/800/1200',
+    image: 1, // Test the case when we import .png files as React Native component, it's convert to ImageRequireSource type (which is a number).
     heading: 'Welcome to the new Employment Hero app',
     body: 'Access your Work, Money and Benefits in the palm of your hand.',
     background: theme.colors.highlightedSurface,
@@ -22,11 +22,25 @@ const carouselData = [
     background: theme.colors.decorativePrimarySurface,
   },
   {
-    image: 'https://picsum.photos/800/1200',
+    image: {
+      uri: 'https://picsum.photos/1200/800',
+      width: 30,
+      height: 100,
+      resizeMode: 'cover' as ImageResizeMode,
+    },
     heading: 'Easier to get around',
     body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae pulvinar quam, ac facilisis massa. Aliquam facilisis nisi eu justo dignissim, vel tempus justo iaculis.',
     background: theme.colors.decorativePrimarySurface,
   },
+  {
+    image: {
+      uri: 'https://picsum.photos/1200/800',
+      width: 30,
+      height: 100,
+    },
+    heading: 'Test slide 4',
+    background: theme.colors.decorativePrimarySurface,
+  },
 ];
 
 describe('Carousel', () => {
@@ -48,11 +62,6 @@ describe('Carousel', () => {
 
     // Slide 1
     expect(queryByText('Welcome to the new Employment Hero app')).toBeTruthy();
-    expect(
-      queryByText(
-        'Access your Work, Money and Benefits in the palm of your hand.'
-      )
-    ).toBeTruthy();
 
     // Slide 2
     expect(queryByText('Same app with a new look!')).toBeTruthy();