stream-chat-react-native-core 5.40.0-rc.2 → 5.41.0-beta.1

package/src/components/MessageMenu/__tests__/MessageUserReactions.test.tsx

@@ -1,186 +0,0 @@
-import React from 'react';
-
-import { Text } from 'react-native';
-
-import { fireEvent, render } from '@testing-library/react-native';
-
-import { ReactionResponse } from 'stream-chat';
-
-import {
-  MessagesContextValue,
-  MessagesProvider,
-} from '../../../contexts/messagesContext/MessagesContext';
-import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
-import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
-import {
-  TranslationContextValue,
-  TranslationProvider,
-} from '../../../contexts/translationContext/TranslationContext';
-import { generateMessage } from '../../../mock-builders/generator/message';
-import { MessageType } from '../../MessageList/hooks/useMessageList';
-import * as useFetchReactionsModule from '../hooks/useFetchReactions';
-import { MessageUserReactions } from '../MessageUserReactions';
-import { MessageUserReactionsItemProps } from '../MessageUserReactionsItem';
-
-const mockTranslations = {
-  t: jest.fn((key) => key),
-};
-
-const mockSupportedReactions = [
-  { Icon: () => null, type: 'like' },
-  { Icon: () => null, type: 'love' },
-];
-
-const defaultProps = {
-  message: {
-    ...generateMessage(),
-    reaction_groups: { like: { count: 1, sum_scores: 1 }, love: { count: 1, sum_scores: 1 } },
-  } as unknown as MessageType,
-  supportedReactions: mockSupportedReactions,
-};
-
-describe('MessageUserReactions when the supportedReactions are defined', () => {
-  beforeAll(() => {
-    const mockLoadNextPage = jest.fn();
-
-    const mockUseFetchReactions = jest.spyOn(useFetchReactionsModule, 'useFetchReactions');
-    mockUseFetchReactions.mockReturnValue({
-      loading: false,
-      loadNextPage: mockLoadNextPage,
-      reactions: [
-        {
-          type: 'like',
-          user: { id: '1', image: 'user1.jpg', name: 'User 1' },
-        } as unknown as ReactionResponse,
-        {
-          type: 'love',
-          user: { id: '2', image: 'user2.jpg', name: 'User 2' },
-        } as unknown as ReactionResponse,
-      ],
-    });
-  });
-  const renderComponent = (props = {}) =>
-    render(
-      <ThemeProvider theme={defaultTheme}>
-        <TranslationProvider value={mockTranslations as unknown as TranslationContextValue}>
-          <MessagesProvider
-            value={
-              {
-                MessageUserReactionsAvatar: () => null,
-                MessageUserReactionsItem: (props: MessageUserReactionsItemProps) => (
-                  <Text>{props.reaction.id + ' ' + props.reaction.type}</Text>
-                ),
-              } as unknown as MessagesContextValue
-            }
-          >
-            <MessageUserReactions {...defaultProps} {...props} />
-          </MessagesProvider>
-        </TranslationProvider>
-      </ThemeProvider>,
-    );
-
-  it('renders correctly', () => {
-    const { getByLabelText, getByText } = renderComponent();
-    expect(getByLabelText('User Reactions on long press message')).toBeTruthy();
-    expect(getByText('Message Reactions')).toBeTruthy();
-  });
-
-  it('renders reaction buttons', () => {
-    const { getByLabelText } = renderComponent();
-    const likeReactionButton = getByLabelText('reaction-button-like-selected');
-    expect(likeReactionButton).toBeDefined();
-    const loveReactionButton = getByLabelText('reaction-button-love-unselected');
-    expect(loveReactionButton).toBeDefined();
-  });
-
-  it('selects the first reaction by default', () => {
-    const { getAllByLabelText } = renderComponent();
-    const reactionButtons = getAllByLabelText(/\breaction-button[^\s]+/);
-    expect(reactionButtons[0].props.accessibilityLabel).toBe('reaction-button-like-selected');
-    expect(reactionButtons[1].props.accessibilityLabel).toBe('reaction-button-love-unselected');
-  });
-
-  it('changes selected reaction when a reaction button is pressed', () => {
-    const { getAllByLabelText } = renderComponent();
-    const reactionButtons = getAllByLabelText(/\breaction-button[^\s]+/);
-
-    fireEvent.press(reactionButtons[1]);
-
-    expect(reactionButtons[0].props.accessibilityLabel).toBe('reaction-button-like-unselected');
-    expect(reactionButtons[1].props.accessibilityLabel).toBe('reaction-button-love-selected');
-  });
-
-  it('renders reactions list', async () => {
-    const { getByText } = renderComponent();
-    const reactionItems = await getByText('1 like');
-    expect(reactionItems).toBeDefined();
-  });
-
-  it('uses provided reactions when passed as a prop', () => {
-    const propReactions = [{ id: '3', image: 'user3.jpg', name: 'User 3', type: 'wow' }];
-    const { getByText } = renderComponent({ reactions: propReactions });
-    const reactionItem = getByText('3 wow');
-    expect(reactionItem).toBeDefined();
-  });
-
-  it("don't render reaction buttons that is of unsupported type", () => {
-    const { queryAllByLabelText } = renderComponent({
-      message: { ...generateMessage(), reaction_groups: { money: 1 } },
-    });
-    const reactionButtons = queryAllByLabelText(/\breaction-button[^\s]+/);
-
-    expect(reactionButtons.length).toBe(0);
-  });
-});
-
-const renderComponent = (props = {}) =>
-  render(
-    <ThemeProvider theme={defaultTheme}>
-      <TranslationProvider value={mockTranslations as unknown as TranslationContextValue}>
-        <MessagesProvider
-          value={
-            {
-              MessageUserReactionsAvatar: () => null,
-              MessageUserReactionsItem: (props: MessageUserReactionsItemProps) => (
-                <Text>{props.reaction.id + ' ' + props.reaction.type}</Text>
-              ),
-            } as unknown as MessagesContextValue
-          }
-        >
-          <MessageUserReactions {...defaultProps} {...props} />
-        </MessagesProvider>
-      </TranslationProvider>
-    </ThemeProvider>,
-  );
-
-describe("MessageUserReactions when the supportedReactions aren't defined", () => {
-  it("don't render reaction buttons that is of unsupported type", () => {
-    const { queryAllByLabelText } = renderComponent({
-      message: { ...generateMessage(), reaction_groups: undefined },
-      supportedReactions: undefined,
-    });
-    const reactionButtons = queryAllByLabelText(/\breaction-button[^\s]+/);
-
-    expect(reactionButtons.length).toBe(0);
-  });
-});
-
-describe('MessageUserReactions when the reactions are in loading phase', () => {
-  beforeAll(() => {
-    const mockLoadNextPage = jest.fn();
-
-    const mockUseFetchReactions = jest.spyOn(useFetchReactionsModule, 'useFetchReactions');
-    mockUseFetchReactions.mockReturnValue({
-      loading: true,
-      loadNextPage: mockLoadNextPage,
-      reactions: [],
-    });
-  });
-
-  it("don't render reactions flatlist when loading is false", () => {
-    const { queryByLabelText } = renderComponent();
-    const reactionsFlatList = queryByLabelText('reaction-flat-list');
-
-    expect(reactionsFlatList).toBeNull();
-  });
-});

package/src/components/MessageMenu/__tests__/MessageUserReactionsAvatar.test.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-
-import { render } from '@testing-library/react-native';
-
-import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
-import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
-import { MessageUserReactionsAvatar } from '../MessageUserReactionsAvatar';
-
-describe('MessageUserReactionsAvatar', () => {
-  const reaction = { id: 'test-user', image: 'image-url', name: 'Test User', type: 'like' }; // Mock reaction data
-
-  it('should render Avatar with correct image, name, and default size', () => {
-    const { queryByTestId } = render(
-      <ThemeProvider theme={defaultTheme}>
-        <MessageUserReactionsAvatar reaction={reaction} />
-      </ThemeProvider>,
-    );
-
-    // Check if the mocked Avatar component is rendered with correct props
-    expect(queryByTestId(`avatar-image`)).toBeTruthy();
-  });
-
-  it('should render Avatar with correct image, name, and custom size', () => {
-    const customSize = 40;
-
-    const { queryByTestId } = render(
-      <ThemeProvider theme={defaultTheme}>
-        <MessageUserReactionsAvatar reaction={reaction} size={customSize} />
-      </ThemeProvider>,
-    );
-
-    // Check if the mocked Avatar component is rendered with correct custom size
-    expect(queryByTestId(`avatar-image`)).toBeTruthy();
-  });
-});

package/src/components/MessageMenu/__tests__/MessageUserReactionsItem.test.tsx

@@ -1,81 +0,0 @@
-import React from 'react';
-
-import { render } from '@testing-library/react-native';
-
-import { ChatContextValue, ChatProvider } from '../../../contexts/chatContext/ChatContext';
-import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
-
-import { Colors, defaultTheme } from '../../../contexts/themeContext/utils/theme';
-import { getTestClientWithUser } from '../../../mock-builders/mock';
-import { MessageUserReactionsItem } from '../MessageUserReactionsItem';
-
-jest.mock('../../../icons', () => ({
-  Unknown: () => null,
-}));
-
-const mockReaction = {
-  id: 'user1',
-  name: 'John Doe',
-  type: 'like',
-};
-
-const mockSupportedReactions = [
-  { Icon: () => null, type: 'like' },
-  { Icon: () => null, type: 'love' },
-];
-
-const MockOverlayReactionsAvatar = () => null;
-
-const renderComponent = async (props = {}, clientUserID = 'user2') =>
-  render(
-    <ChatProvider
-      value={{ client: await getTestClientWithUser({ id: clientUserID }) } as ChatContextValue}
-    >
-      <ThemeProvider theme={defaultTheme}>
-        <MessageUserReactionsItem
-          MessageUserReactionsAvatar={MockOverlayReactionsAvatar}
-          reaction={mockReaction}
-          supportedReactions={mockSupportedReactions}
-          {...props}
-        />
-      </ThemeProvider>
-    </ChatProvider>,
-  );
-
-describe('MessageUserReactionsItem', () => {
-  it('renders correctly', async () => {
-    const { getByLabelText, getByText } = await renderComponent();
-    expect(getByLabelText('Individual User Reaction on long press message')).toBeTruthy();
-    expect(getByText('John Doe')).toBeTruthy();
-  });
-
-  it('aligns reaction bubble to the right for other users', async () => {
-    const { getByLabelText } = await renderComponent();
-    const container = getByLabelText('Individual User Reaction on long press message');
-    const reactionBubble = container.props.children[0].props.children[1];
-    expect(reactionBubble.props.style[1].borderColor).toBe(Colors.grey_gainsboro);
-  });
-
-  it('aligns reaction bubble to the left for the current user', async () => {
-    const { getByLabelText } = await renderComponent({}, 'user1');
-    const container = getByLabelText('Individual User Reaction on long press message');
-    const reactionBubble = container.props.children[0].props.children[1];
-    expect(reactionBubble.props.style[1].borderColor).toBe(Colors.white);
-  });
-
-  it('uses Unknown icon for unsupported reaction types', async () => {
-    const { getByLabelText } = await renderComponent({
-      reaction: { ...mockReaction, type: 'unsupported' },
-    });
-    const container = getByLabelText('Individual User Reaction on long press message');
-    const reactionIcon = container.props.children[0].props.children[1].props.children;
-    expect(reactionIcon.type.name).toBe('Unknown');
-  });
-
-  it('uses correct icon for supported reaction types', async () => {
-    const { getByLabelText } = await renderComponent();
-    const container = getByLabelText('Individual User Reaction on long press message');
-    const reactionIcon = container.props.children[0].props.children[1].props.children;
-    expect(reactionIcon.type).not.toBe('Unknown');
-  });
-});

package/src/components/MessageMenu/__tests__/ReactionButton.test.tsx

@@ -1,77 +0,0 @@
-import React from 'react';
-
-import { Text } from 'react-native';
-
-import { cleanup, fireEvent, render } from '@testing-library/react-native';
-
-import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
-import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
-import { IconProps } from '../../../icons';
-import { ReactionButton } from '../ReactionButton';
-
-const MockIcon = (props: IconProps) => <Text>{props?.pathFill?.toString() || ''}</Text>;
-
-describe('ReactionButton', () => {
-  afterEach(() => {
-    jest.clearAllMocks();
-    cleanup();
-  });
-
-  const mockOnPress = jest.fn();
-
-  const defaultProps = {
-    Icon: MockIcon,
-    onPress: mockOnPress,
-    selected: false,
-    type: 'like',
-  };
-
-  it('should render correctly with given props', () => {
-    const { getByText } = render(
-      <ThemeProvider theme={defaultTheme}>
-        <ReactionButton {...defaultProps} />
-      </ThemeProvider>,
-    );
-
-    // Check if the unselected pathFill color is rendered by the mock Icon
-    expect(
-      getByText(defaultTheme.messageMenu.reactionButton.unfilledColor.toString()),
-    ).toBeTruthy();
-  });
-
-  it('should call onPress function with the correct reaction type when pressed', () => {
-    const { getByLabelText } = render(
-      <ThemeProvider theme={defaultTheme}>
-        <ReactionButton {...defaultProps} />
-      </ThemeProvider>,
-    );
-
-    // Simulate a press event
-    fireEvent.press(getByLabelText('reaction-button-like-unselected'));
-
-    // Verify if the mock function has been called with the correct reaction type
-    expect(mockOnPress).toHaveBeenCalledWith('like');
-  });
-
-  it('should not call onPress when the onPress prop is not provided', () => {
-    const { getByLabelText } = render(
-      <ThemeProvider theme={defaultTheme}>
-        <ReactionButton {...defaultProps} onPress={undefined} />
-      </ThemeProvider>,
-    );
-
-    fireEvent.press(getByLabelText('reaction-button-like-unselected'));
-
-    expect(mockOnPress).not.toHaveBeenCalled();
-  });
-
-  it('should apply selected styles correctly when selected is true', () => {
-    const { getByText } = render(
-      <ThemeProvider theme={defaultTheme}>
-        <ReactionButton {...defaultProps} selected={true} />
-      </ThemeProvider>,
-    );
-
-    expect(getByText(defaultTheme.messageMenu.reactionButton.filledColor.toString())).toBeTruthy();
-  });
-});

package/src/components/UIComponents/BottomSheetModal.tsx

@@ -1,170 +0,0 @@
-import React, { PropsWithChildren, useEffect } from 'react';
-import {
-  Animated,
-  Keyboard,
-  KeyboardEvent,
-  Modal,
-  StyleSheet,
-  TouchableWithoutFeedback,
-  useWindowDimensions,
-  View,
-} from 'react-native';
-import {
-  Gesture,
-  GestureDetector,
-  GestureHandlerRootView,
-  GestureUpdateEvent,
-  PanGestureHandlerEventPayload,
-} from 'react-native-gesture-handler';
-
-import { runOnJS } from 'react-native-reanimated';
-
-import { useTheme } from '../../contexts/themeContext/ThemeContext';
-
-export type BottomSheetModalProps = {
-  /**
-   * Function to call when the modal is closed.
-   * @returns void
-   */
-  onClose: () => void;
-  /**
-   * Whether the modal is visible.
-   */
-  visible: boolean;
-  /**
-   * The height of the modal.
-   */
-  height?: number;
-};
-
-/**
- * A modal that slides up from the bottom of the screen.
- */
-export const BottomSheetModal = (props: PropsWithChildren<BottomSheetModalProps>) => {
-  const { height: windowHeight, width: windowWidth } = useWindowDimensions();
-  const { children, height = windowHeight / 2, onClose, visible } = props;
-  const {
-    theme: {
-      colors: { grey, overlay, white_snow },
-    },
-  } = useTheme();
-
-  const translateY = new Animated.Value(height);
-
-  const openAnimation = Animated.timing(translateY, {
-    duration: 200,
-    toValue: 0,
-    useNativeDriver: true,
-  });
-
-  const closeAnimation = Animated.timing(translateY, {
-    duration: 50,
-    toValue: height,
-    useNativeDriver: true,
-  });
-
-  const handleDismiss = () => {
-    closeAnimation.start(() => onClose());
-  };
-
-  useEffect(() => {
-    if (visible) {
-      openAnimation.start();
-    }
-  }, [visible, openAnimation]);
-
-  useEffect(() => {
-    const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', keyboardDidShow);
-    const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', keyboardDidHide);
-
-    return () => {
-      keyboardDidShowListener.remove();
-      keyboardDidHideListener.remove();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const keyboardDidShow = (event: KeyboardEvent) => {
-    Animated.timing(translateY, {
-      duration: 250,
-      toValue: -event.endCoordinates.height,
-      useNativeDriver: true,
-    }).start();
-  };
-
-  const keyboardDidHide = () => {
-    Animated.timing(translateY, {
-      duration: 250,
-      toValue: 0,
-      useNativeDriver: true,
-    }).start();
-  };
-
-  const handleUpdate = (event: GestureUpdateEvent<PanGestureHandlerEventPayload>) => {
-    const translationY = Math.max(event.translationY, 0);
-    translateY.setValue(translationY);
-  };
-
-  const gesture = Gesture.Pan()
-    .onUpdate((event) => {
-      runOnJS(handleUpdate)(event);
-    })
-    .onEnd((event) => {
-      if (event.velocityY > 500 || event.translationY > height / 2) {
-        runOnJS(handleDismiss)();
-      } else {
-        runOnJS(openAnimation.start)();
-      }
-    });
-
-  return (
-    <Modal animationType='fade' onRequestClose={handleDismiss} transparent visible={visible}>
-      <GestureHandlerRootView style={{ flex: 1 }}>
-        <TouchableWithoutFeedback onPress={handleDismiss}>
-          <View style={[styles.overlay, { backgroundColor: overlay }]}>
-            <GestureDetector gesture={gesture}>
-              <Animated.View
-                style={[
-                  styles.container,
-                  {
-                    backgroundColor: white_snow,
-                    height,
-                    transform: [{ translateY }],
-                  },
-                ]}
-              >
-                <View style={[styles.handle, { backgroundColor: grey, width: windowWidth / 4 }]} />
-                <View style={styles.contentContainer}>{children}</View>
-              </Animated.View>
-            </GestureDetector>
-          </View>
-        </TouchableWithoutFeedback>
-      </GestureHandlerRootView>
-    </Modal>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
-  },
-  content: {
-    flex: 1,
-    padding: 16,
-  },
-  contentContainer: {
-    flex: 1,
-    marginTop: 8,
-  },
-  handle: {
-    alignSelf: 'center',
-    borderRadius: 4,
-    height: 4,
-    marginVertical: 8,
-  },
-  overlay: {
-    flex: 1,
-    justifyContent: 'flex-end',
-  },
-});

package/src/components/UIComponents/index.ts

@@ -1,3 +0,0 @@
-export * from './BottomSheetModal';
-export * from './ImageBackground';
-export * from './Spinner';

package/src/contexts/chatConfigContext/ChatConfigContext.tsx

@@ -1,33 +0,0 @@
-import React, { PropsWithChildren, useContext } from 'react';
-
-export type ChatConfigContextValue = {
-  /**
-   * This option allows you to specify a list of CDNs that offer image resizing.
-   */
-  resizableCDNHosts?: string[];
-};
-
-export const chatConfigContextDefaultvalue = {
-  resizableCDNHosts: ['.stream-io-cdn.com'],
-};
-
-export const ChatConfigContext = React.createContext<ChatConfigContextValue>(
-  chatConfigContextDefaultvalue,
-);
-
-export const ChatConfigProvider = ({
-  children,
-  value = chatConfigContextDefaultvalue,
-}: PropsWithChildren<{
-  value?: ChatConfigContextValue;
-}>) => (
-  <ChatConfigContext.Provider value={value as unknown as ChatConfigContextValue}>
-    {children}
-  </ChatConfigContext.Provider>
-);
-
-export const useChatConfigContext = () => {
-  const contextValue = useContext(ChatConfigContext) as unknown as ChatConfigContextValue;
-
-  return contextValue;
-};