stream-chat-react-native-core 9.2.1-beta.1 → 9.2.1-beta.2

package/src/components/Poll/components/__tests__/PollModalHeader.test.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+
+import { Platform, StyleProp, StyleSheet, ViewStyle } from 'react-native';
+
+import { render, screen } from '@testing-library/react-native';
+
+import { ThemeProvider } from '../../../../contexts';
+import { PollModalHeader } from '../PollModalHeader';
+
+const originalPlatform = Platform.OS;
+
+const setPlatform = (os: typeof Platform.OS) => {
+  Object.defineProperty(Platform, 'OS', {
+    configurable: true,
+    get: () => os,
+  });
+};
+
+const getCloseButtonWrapperStyle = () => {
+  let node = screen.getByTestId('poll-results-close-button');
+
+  while (node.parent) {
+    const style = StyleSheet.flatten(node.parent.props.style as StyleProp<ViewStyle>);
+    if (style?.height === 40 && style.width === 40) {
+      return style;
+    }
+    node = node.parent;
+  }
+
+  throw new Error('Poll modal header close button wrapper not found');
+};
+
+const collectPathData = (node: unknown): string[] => {
+  if (!node || typeof node !== 'object') {
+    return [];
+  }
+
+  if (Array.isArray(node)) {
+    return node.reduce<string[]>((acc, child) => [...acc, ...collectPathData(child)], []);
+  }
+
+  const { children, props } = node as {
+    children?: unknown;
+    props?: { d?: unknown };
+  };
+
+  return [...(typeof props?.d === 'string' ? [props.d] : []), ...collectPathData(children)];
+};
+
+const collectTransforms = (node: unknown): string[] => {
+  if (!node || typeof node !== 'object') {
+    return [];
+  }
+
+  if (Array.isArray(node)) {
+    return node.reduce<string[]>((acc, child) => [...acc, ...collectTransforms(child)], []);
+  }
+
+  const { children, props } = node as {
+    children?: unknown;
+    props?: { style?: StyleProp<ViewStyle>; transform?: unknown };
+  };
+  const style = StyleSheet.flatten(props?.style);
+  const styleTransforms = Array.isArray(style?.transform)
+    ? style.transform.flatMap((transform) => {
+        if (
+          transform &&
+          typeof transform === 'object' &&
+          'rotate' in transform &&
+          typeof transform.rotate === 'string'
+        ) {
+          return [transform.rotate];
+        }
+        return [];
+      })
+    : [];
+
+  return [
+    ...(typeof props?.transform === 'string' ? [props.transform] : []),
+    ...styleTransforms,
+    ...collectTransforms(children),
+  ];
+};
+
+const renderPollModalHeader = () =>
+  render(
+    <ThemeProvider>
+      <PollModalHeader onPress={jest.fn()} title='Poll Results' />
+    </ThemeProvider>,
+  );
+
+describe('PollModalHeader', () => {
+  afterEach(() => {
+    setPlatform(originalPlatform);
+  });
+
+  it('renders a secondary ghost arrow-left button outside Android', () => {
+    setPlatform('ios');
+
+    renderPollModalHeader();
+
+    const style = getCloseButtonWrapperStyle();
+    expect(style.backgroundColor).toBeUndefined();
+    expect(style.borderWidth).toBeUndefined();
+    expect(style.borderColor).toBeUndefined();
+    expect(collectPathData(screen.toJSON())).toContain(
+      'M10 16.875V3.125M10 3.125L4.375 8.75M10 3.125L15.625 8.75',
+    );
+    expect(collectTransforms(screen.toJSON())).toContain('-90deg');
+  });
+
+  it('renders a secondary ghost arrow-left button on Android', () => {
+    setPlatform('android');
+
+    renderPollModalHeader();
+
+    const style = getCloseButtonWrapperStyle();
+    expect(style.backgroundColor).toBeUndefined();
+    expect(style.borderWidth).toBeUndefined();
+    expect(style.borderColor).toBeUndefined();
+    expect(collectPathData(screen.toJSON())).toContain(
+      'M10 16.875V3.125M10 3.125L4.375 8.75M10 3.125L15.625 8.75',
+    );
+    expect(collectTransforms(screen.toJSON())).toContain('-90deg');
+  });
+});

package/src/components/Thread/__tests__/__snapshots__/Thread.test.tsx.snap

@@ -603,7 +603,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                   {
                                     "alignItems": "center",
                                     "flexDirection": "row",
-                                    "gap": 8,
+                                    "gap": 4,
                                     "justifyContent": "center",
                                     "maxWidth": "100%",
                                     "paddingVertical": 4,
@@ -946,7 +946,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                   {
                                     "alignItems": "center",
                                     "flexDirection": "row",
-                                    "gap": 8,
+                                    "gap": 4,
                                     "justifyContent": "center",
                                     "maxWidth": "100%",
                                     "paddingVertical": 4,
@@ -1322,7 +1322,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                   {
                                     "alignItems": "center",
                                     "flexDirection": "row",
-                                    "gap": 8,
+                                    "gap": 4,
                                     "justifyContent": "center",
                                     "maxWidth": "100%",
                                     "paddingVertical": 4,
@@ -1656,7 +1656,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                 {
                                   "alignItems": "center",
                                   "flexDirection": "row",
-                                  "gap": 8,
+                                  "gap": 4,
                                   "justifyContent": "center",
                                   "maxWidth": "100%",
                                   "paddingVertical": 4,
@@ -1768,7 +1768,7 @@ exports[`Thread should match thread snapshot 1`] = `
                 },
                 {
                   "backgroundColor": "#ffffff",
-                  "borderColor": "#d5dbe1",
+                  "borderTopColor": "#ebeef1",
                   "borderTopWidth": 1,
                   "paddingBottom": 16,
                 },

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

@@ -7,6 +7,8 @@ import { avatarSizes } from './constants';
 
 import { UserAvatar } from './UserAvatar';
 
+import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import { primitives } from '../../../theme';
 import { BadgeCount } from '../Badge';
 
 export type AvatarStackProps = {
@@ -85,12 +87,21 @@ export const UserAvatarStack = ({
   overlap,
   users,
 }: UserAvatarStackProps) => {
+  const styles = useUserAvatarStackStyles();
   const items = useMemo(
     () =>
       users.map((user) => {
-        return <UserAvatar key={user.id} user={user} size={avatarSize} showBorder />;
+        return (
+          <UserAvatar
+            key={user.id}
+            style={styles.userAvatarWrapper}
+            user={user}
+            size={avatarSize}
+            showBorder
+          />
+        );
       }),
-    [avatarSize, users],
+    [avatarSize, styles.userAvatarWrapper, users],
   );
 
   return (
@@ -98,6 +109,25 @@ export const UserAvatarStack = ({
   );
 };
 
+const useUserAvatarStackStyles = () => {
+  const {
+    theme: { avatarStack, semantics },
+  } = useTheme();
+
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        userAvatarWrapper: {
+          borderWidth: 2,
+          borderColor: semantics.borderCoreInverse,
+          borderRadius: primitives.radiusMax,
+          ...avatarStack.userAvatarWrapper,
+        },
+      }),
+    [avatarStack.userAvatarWrapper, semantics.borderCoreInverse],
+  );
+};
+
 const useStyles = () => {
   return useMemo(
     () =>

package/src/contexts/themeContext/utils/theme.ts

@@ -145,6 +145,9 @@ export type Theme = {
     presenceIndicator: CircleProps;
     presenceIndicatorContainer: ViewStyle;
   };
+  avatarStack: {
+    userAvatarWrapper: ViewStyle;
+  };
   bottomSheetModal: {
     container: ViewStyle;
     contentContainer: ViewStyle;
@@ -1095,6 +1098,9 @@ export const defaultTheme: Theme = {
     },
     presenceIndicatorContainer: {},
   },
+  avatarStack: {
+    userAvatarWrapper: {},
+  },
   bottomSheetModal: {
     container: {},
     contentContainer: {},

package/src/icons/arrow-left.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { I18nManager } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+
+import { IconProps } from './utils/base';
+
+export const ArrowLeft = ({ height, size, style, width, ...rest }: IconProps) => (
+  <Svg
+    fill='none'
+    height={height ?? size}
+    style={[style, { transform: [{ rotate: I18nManager.isRTL ? '90deg' : '-90deg' }] }]}
+    viewBox='0 0 20 20'
+    width={width ?? size}
+  >
+    <Path
+      d='M10 16.875V3.125M10 3.125L4.375 8.75M10 3.125L15.625 8.75'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      strokeWidth={1.5}
+      {...rest}
+    />
+  </Svg>
+);

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "9.2.1-beta.1"
+  "version": "9.2.1-beta.2"
 }