@hero-design/rn 8.45.0-test.0 → 8.45.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.45.0-test.0",
+  "version": "8.45.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -28,11 +28,11 @@
     "nanoid": "^4.0.2"
   },
   "peerDependencies": {
-    "@hero-design/react-native-month-year-picker": "^8.42.5",
+    "@hero-design/react-native-month-year-picker": "^8.42.6",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.4.3",
     "react": "18.2.0",
-    "react-native": "0.71.13",
+    "react-native": "^0.71.0",
     "react-native-gesture-handler": "^1.10.3 | ~2.5.0",
     "react-native-linear-gradient": "^2.6.2",
     "react-native-pager-view": "^5.4.25",
@@ -48,8 +48,8 @@
     "@babel/runtime": "^7.20.0",
     "@emotion/jest": "^11.11.0",
     "@hero-design/eslint-plugin": "8.42.5",
-    "@hero-design/react-native-month-year-picker": "^8.42.5",
-    "@react-native-community/datetimepicker": "^3.5.2",
+    "@hero-design/react-native-month-year-picker": "^8.42.6",
+    "@react-native-community/datetimepicker": "3.5.2",
     "@react-native-community/slider": "4.4.3",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^21.0.1",
@@ -71,7 +71,7 @@
     "jest-junit": "^16.0.0",
     "prettier-config-hd": "8.42.4",
     "react": "18.2.0",
-    "react-native": "0.71.13",
+    "react-native": "0.71.14",
     "react-native-gesture-handler": "~2.5.0",
     "react-native-linear-gradient": "^2.6.2",
     "react-native-pager-view": "^5.4.25",

package/src/components/Accordion/index.tsx

@@ -45,8 +45,8 @@ const Accordion = <K extends Key>({
   activeItemKey,
   onItemPress,
   variant = 'default',
-  testID,
   style,
+  testID,
 }: AccordionProps<K>) => {
   const defaultValue = useMemo(
     () => (typeof activeItemKey === 'number' ? NaN : '') as K,

package/src/components/Avatar/AvatarStack/StyledAvatarStack.tsx

@@ -1,29 +1,83 @@
 import styled from '@emotion/native';
 import { View } from 'react-native';
 import Avatar, { AvatarProps } from '../Avatar';
+import Box from '../../Box';
 
 const VISIBLE_RATIO = 0.7;
 
+type ThemeVariant = 'horizontal' | 'vertical';
+
 export const StyledWrapper = styled(View)<{
   themeSize: Required<AvatarProps>['size'];
   themeAvatarCount: number;
-}>(({ theme, themeSize, themeAvatarCount }) => {
-  const avatarSize = theme.__hd__.avatar.sizes[themeSize];
+  themeVariant: ThemeVariant;
+  themeHasSurplus: boolean;
+}>(
+  ({
+    theme,
+    themeSize,
+    themeAvatarCount,
+    themeVariant = 'horizontal',
+    themeHasSurplus = false,
+  }) => {
+    const avatarSize = theme.__hd__.avatar.sizes[themeSize];
+
+    const widthAndHeightByVariant = {
+      horizontal: {
+        width:
+          avatarSize *
+          (1 +
+            VISIBLE_RATIO *
+              (themeHasSurplus ? themeAvatarCount : themeAvatarCount - 1)),
+        height: avatarSize,
+      },
+      vertical: {
+        width: avatarSize,
+        height:
+          avatarSize *
+          (1 +
+            VISIBLE_RATIO *
+              (themeHasSurplus ? themeAvatarCount : themeAvatarCount - 1)),
+      },
+    };
+
+    return {
+      flexDirection: themeVariant === 'horizontal' ? 'row' : 'column',
+      height: widthAndHeightByVariant[themeVariant].height,
+      width: widthAndHeightByVariant[themeVariant].width,
+    };
+  }
+);
+
+export const StyledAvatar = styled(Avatar)<{
+  themeIndex: number;
+  themeVariant: ThemeVariant;
+}>(({ theme, themeIndex, size = 'small', themeVariant = 'horizontal' }) => {
+  const avatarSize = theme.__hd__.avatar.sizes[size];
+  const offset = avatarSize * VISIBLE_RATIO * themeIndex;
 
   return {
-    flexDirection: 'row',
-    height: avatarSize,
-    width: avatarSize * (1 + VISIBLE_RATIO * (themeAvatarCount - 1)),
+    position: 'absolute',
+    left: themeVariant === 'horizontal' ? offset : undefined,
+    top: themeVariant === 'vertical' ? offset : undefined,
   };
 });
 
-export const StyledAvatar = styled(Avatar)<{
+export const StyledSurplusContainer = styled(Box)<{
   themeIndex: number;
-}>(({ theme, themeIndex, size = 'small' }) => {
-  const avatarSize = theme.__hd__.avatar.sizes[size];
+  themeSize: AvatarProps['size'];
+  themeVariant: ThemeVariant;
+}>(({ theme, themeIndex, themeVariant, themeSize = 'small' }) => {
+  const avatarSize = theme.__hd__.avatar.sizes[themeSize];
+  const offset = avatarSize * VISIBLE_RATIO * themeIndex;
 
   return {
     position: 'absolute',
-    left: avatarSize * VISIBLE_RATIO * themeIndex,
+    left: themeVariant === 'horizontal' ? offset : undefined,
+    top: themeVariant === 'vertical' ? offset : undefined,
+    borderRadius: theme.__hd__.avatar.radii.rounded,
+    width: theme.__hd__.avatar.sizes[themeSize],
+    height: theme.__hd__.avatar.sizes[themeSize],
+    overflow: 'hidden',
   };
 });

package/src/components/Avatar/AvatarStack/__tests__/StyledAvatarStack.spec.tsx

@@ -11,26 +11,88 @@ afterEach(() => {
 });
 
 describe('StyledWrapper', () => {
-  it('renders correctly', () => {
+  it.each`
+    themeVariant
+    ${'horizontal'}
+    ${'vertical'}
+  `('renders correctly with $variant', ({ themeVariant }) => {
     const wrapper = renderWithTheme(
-      <StyledWrapper themeSize="large" themeAvatarCount={4} testID="wrapper" />
+      <StyledWrapper
+        themeHasSurplus={false}
+        themeVariant={themeVariant}
+        themeSize="large"
+        themeAvatarCount={4}
+        testID="wrapper"
+      />
+    );
+
+    expect(wrapper.getByTestId('wrapper')).toHaveStyle(
+      themeVariant === 'horizontal'
+        ? {
+            height: 48,
+            width: 48 * (1 + 0.7 * 3),
+          }
+        : {
+            height: 48 * (1 + 0.7 * 3),
+            width: 48,
+          }
     );
 
-    expect(wrapper.getByTestId('wrapper')).toHaveStyle({
-      height: 48,
-      width: 48 * (1 + 0.7 * 3),
-    });
     expect(wrapper.toJSON()).toMatchSnapshot();
   });
+
+  it.each`
+    themeHasSurplus
+    ${true}
+    ${false}
+  `(
+    'render with correct width and height when themeHasSurplus is $themeHasSurplus',
+    ({ themeHasSurplus }) => {
+      const { toJSON, getByTestId } = renderWithTheme(
+        <StyledWrapper
+          themeHasSurplus={themeHasSurplus}
+          themeVariant="horizontal"
+          themeSize="large"
+          themeAvatarCount={4}
+          testID="wrapper"
+        />
+      );
+
+      expect(getByTestId('wrapper')).toHaveStyle(
+        themeHasSurplus
+          ? {
+              height: 48,
+              width: 48 * (1 + 0.7 * 4),
+            }
+          : {
+              height: 48,
+              width: 48 * (1 + 0.7 * 3),
+            }
+      );
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
 });
 
 describe('StyledAvatar', () => {
-  it('renders correctly', () => {
+  it.each`
+    themeVariant
+    ${'horizontal'}
+    ${'vertical'}
+  `('renders correctly with $variant', ({ themeVariant }) => {
     const wrapper = renderWithTheme(
-      <StyledAvatar themeIndex={2} size="medium" title="AA" testID="avatar" />
+      <StyledAvatar
+        themeVariant={themeVariant}
+        themeIndex={2}
+        size="medium"
+        title="AA"
+        testID="avatar"
+      />
     );
 
-    expect(wrapper.getByTestId('avatar')).toHaveStyle({ left: 56 });
+    expect(wrapper.getByTestId('avatar')).toHaveStyle(
+      themeVariant === 'horizontal' ? { left: 56 } : { top: 56 }
+    );
     expect(wrapper.toJSON()).toMatchSnapshot();
   });
 });

package/src/components/Avatar/AvatarStack/__tests__/__snapshots__/StyledAvatarStack.spec.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`StyledAvatar renders correctly 1`] = `
+exports[`StyledAvatar renders correctly with $variant 1`] = `
 <View
   style={
     {
@@ -45,6 +45,7 @@ exports[`StyledAvatar renders correctly 1`] = `
         "opacity": 1,
         "overflow": "hidden",
         "position": "absolute",
+        "top": undefined,
         "width": 40,
       }
     }
@@ -121,7 +122,225 @@ exports[`StyledAvatar renders correctly 1`] = `
 </View>
 `;
 
-exports[`StyledWrapper renders correctly 1`] = `
+exports[`StyledAvatar renders correctly with $variant 2`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": true,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "backgroundColor": "#401960",
+        "borderRadius": 999,
+        "height": 40,
+        "left": undefined,
+        "opacity": 1,
+        "overflow": "hidden",
+        "position": "absolute",
+        "top": 56,
+        "width": 40,
+      }
+    }
+    testID="avatar"
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "height": "100%",
+            "justifyContent": "center",
+            "width": "100%",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        allowFontScaling={false}
+        style={
+          [
+            {
+              "color": "#001f23",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
+            },
+            [
+              {
+                "color": "#ffffff",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 18,
+                "lineHeight": 0,
+                "overflow": "hidden",
+                "textAlign": "center",
+                "textAlignVertical": "center",
+              },
+              undefined,
+            ],
+          ]
+        }
+        themeFontSize="medium"
+        themeFontWeight="regular"
+        themeIntent="body"
+        themeSize="medium"
+        themeTypeface="neutral"
+      >
+        AA
+      </Text>
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`StyledWrapper render with correct width and height when themeHasSurplus is false 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "flexDirection": "row",
+          "height": 48,
+          "width": 148.79999999999998,
+        },
+        undefined,
+      ]
+    }
+    testID="wrapper"
+    themeAvatarCount={4}
+    themeHasSurplus={false}
+    themeSize="large"
+    themeVariant="horizontal"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`StyledWrapper render with correct width and height when themeHasSurplus is true 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "flexDirection": "row",
+          "height": 48,
+          "width": 182.39999999999998,
+        },
+        undefined,
+      ]
+    }
+    testID="wrapper"
+    themeAvatarCount={4}
+    themeHasSurplus={true}
+    themeSize="large"
+    themeVariant="horizontal"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`StyledWrapper renders correctly with $variant 1`] = `
 <View
   style={
     {
@@ -142,7 +361,57 @@ exports[`StyledWrapper renders correctly 1`] = `
     }
     testID="wrapper"
     themeAvatarCount={4}
+    themeHasSurplus={false}
+    themeSize="large"
+    themeVariant="horizontal"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`StyledWrapper renders correctly with $variant 2`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "flexDirection": "column",
+          "height": 148.79999999999998,
+          "width": 48,
+        },
+        undefined,
+      ]
+    }
+    testID="wrapper"
+    themeAvatarCount={4}
+    themeHasSurplus={false}
     themeSize="large"
+    themeVariant="vertical"
   />
   <View
     pointerEvents="box-none"