@amityco/react-native-social-uikit 4.1.1-fdf83f6b.0 → 4.2.0

package/src/chat/features/home/elements/CreateChatMenu/CreateChatMenu.tsx

@@ -1,131 +0,0 @@
-// CreateChatMenu — the "+" new-chat header button, ported from AmityUiKitWeb
-// v4/chat/features/home/elements/CreateChatMenu.
-//
-// Behaviour (mirrors web): when only one channel type is enabled it is a single
-// filled icon button; when both `conversation` and `community` are enabled it
-// opens a Popover with a "New chat" / "New group" Menu.
-//
-// RN adaptations from web:
-//   - Web reads enabled types from `useChatFeatureFlags`; RN has no such hook
-//     yet, so the enabled types come in as a prop (defaulting to conversation
-//     only). The web `useChatNavigation().push` → React Navigation.
-//   - There is no RN `SelectGroupMemberPage` route yet, so the group action is
-//     delegated to an optional `onNewGroup` callback rather than navigating.
-//   - Web `Button.Icon` (filled/secondary) → a Pressable + AmityIcon on a filled
-//     surface, tinted via the Icon/IconButton/Filled/Secondary token.
-
-// 1. React / RN imports
-import { Pressable } from 'react-native';
-
-// 2. Third-party imports
-import { useNavigation } from '@react-navigation/native';
-import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
-
-// 3. Internal imports (relative)
-import { Popover } from '../../../../../core/design/components/Popover';
-import { Menu } from '../../../../../core/design/components/Menu';
-import { AmityIcon } from '../../../../../core/design/icons';
-import { AmityColorToken } from '../../../../../core/design/tokens/amity-color-tokens';
-import { useString } from '../../../../../core/localization';
-import type { RootStackParamList } from '../../../../../core/routes/RouteParamList';
-import { useStyles } from './styles';
-
-// 4. Types
-type CreateChatMenuProps = {
-  /** Channel types the chat feature exposes. Defaults to conversation only. */
-  enabledChannelTypes?: Amity.ChannelType[];
-  /** Invoked for the "New group" action (no RN group-create route exists yet). */
-  onNewGroup?: () => void;
-};
-
-// The filled "+" trigger button (module-scope so it is not re-created per render).
-type PlusButtonProps = {
-  accessibilityLabel: string;
-  onPress?: () => void;
-};
-
-function PlusButton({ accessibilityLabel, onPress }: PlusButtonProps) {
-  const { styles } = useStyles();
-  return (
-    <Pressable
-      style={styles.iconButton}
-      accessibilityRole="button"
-      accessibilityLabel={accessibilityLabel}
-      onPress={onPress}
-    >
-      <AmityIcon
-        name="plus-r"
-        size={24}
-        tokenColor={AmityColorToken.IconIconButtonFilledSecondaryDefault}
-      />
-    </Pressable>
-  );
-}
-
-// 5. Named function component
-export function CreateChatMenu({
-  enabledChannelTypes = ['conversation'],
-  onNewGroup,
-}: CreateChatMenuProps) {
-  const navigation =
-    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
-
-  const createAriaLabel = useString('amity_chat_create_new_chat');
-  const directLabel = useString('amity_chat_create_direct');
-  const groupLabel = useString('amity_chat_create_group');
-
-  const hasConversation = enabledChannelTypes.includes('conversation');
-  const hasCommunity = enabledChannelTypes.includes('community');
-  const showBoth = hasConversation && hasCommunity;
-
-  const goToCreateConversation = () =>
-    navigation.navigate('AmityChannelCreateConversationPage');
-  // Group creation starts at member selection; callers may override via onNewGroup.
-  const goToNewGroup =
-    onNewGroup ?? (() => navigation.navigate('AmitySelectGroupMemberPage'));
-
-  if (!showBoth) {
-    return (
-      <PlusButton
-        accessibilityLabel={createAriaLabel}
-        onPress={hasConversation ? goToCreateConversation : goToNewGroup}
-      />
-    );
-  }
-
-  return (
-    <Popover
-      placement="bottom right"
-      // eslint-disable-next-line react/no-unstable-nested-components -- Popover's trigger is a render-prop, not a component definition.
-      trigger={({ openPopover }) => (
-        <PlusButton
-          accessibilityLabel={createAriaLabel}
-          onPress={openPopover}
-        />
-      )}
-    >
-      {({ closePopover }) => (
-        <Menu container="popover">
-          <Menu.Item
-            icon="user-plus-r"
-            label={directLabel}
-            typography="body"
-            onPress={() => {
-              closePopover();
-              goToCreateConversation();
-            }}
-          />
-          <Menu.Item
-            icon="user-group-r"
-            label={groupLabel}
-            typography="body"
-            onPress={() => {
-              closePopover();
-              goToNewGroup();
-            }}
-          />
-        </Menu>
-      )}
-    </Popover>
-  );
-}

package/src/chat/features/home/elements/CreateChatMenu/index.ts

@@ -1 +0,0 @@
-export { CreateChatMenu } from './CreateChatMenu';

package/src/chat/features/home/elements/CreateChatMenu/styles.ts

@@ -1,26 +0,0 @@
-// Styles for CreateChatMenu — the filled "+" icon button.
-// Web: Button.Icon styleType="filled" hierarchy="secondary" size 32.
-// Colours via design tokens (no hardcoded hex).
-
-import { StyleSheet } from 'react-native';
-import { useToken } from '../../../../../core/design/theme/useToken';
-import { AmityColorToken } from '../../../../../core/design/tokens/amity-color-tokens';
-
-export const useStyles = () => {
-  const token = useToken();
-
-  const styles = StyleSheet.create({
-    iconButton: {
-      width: 32,
-      height: 32,
-      borderRadius: 16,
-      alignItems: 'center',
-      justifyContent: 'center',
-      backgroundColor: token(
-        AmityColorToken.SurfaceIconButtonFilledSecondaryEnabled
-      ),
-    },
-  });
-
-  return { styles, token };
-};

package/src/chat/features/home/elements/SearchButton/SearchButton.tsx

@@ -1,57 +0,0 @@
-// SearchButton — the chat-home search header button, ported from AmityUiKitWeb
-// v4/chat/features/home/elements/SearchButton.
-//
-// Behaviour (mirrors web): a filled secondary icon button that navigates to the
-// SearchChannelPage.
-//
-// RN adaptations from web:
-//   - Web `Button.Icon icon={<Search />} styleType="filled" hierarchy="secondary"
-//     size={32}` → a Pressable + AmityIcon on a filled secondary surface (the
-//     same construction as the home CreateChatMenu "+" button). The web `Search`
-//     icon's default (Regular) variant byte-matches the `search-r` registry glyph.
-//   - Web `useChatNavigation().push(SearchChannelPage)` → React Navigation
-//     `navigate('AmitySearchChannelPage')`.
-
-// 1. React / RN imports
-import { Pressable } from 'react-native';
-
-// 2. Third-party imports
-import { useNavigation } from '@react-navigation/native';
-import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
-
-// 3. Internal imports (relative)
-import { AmityIcon } from '../../../../../core/design/icons';
-import { AmityColorToken } from '../../../../../core/design/tokens/amity-color-tokens';
-import { useString } from '../../../../../core/localization';
-import type { RootStackParamList } from '../../../../../core/routes/RouteParamList';
-import { useStyles } from './styles';
-
-// The SearchChannelPage route is registered by the orchestrator in the navigator
-// + RouteParamList (both DO NOT TOUCH here). We extend the param-list type locally
-// with the destination so this button type-checks ahead of that wiring.
-type SearchStackParamList = RootStackParamList & {
-  AmitySearchChannelPage: undefined;
-};
-
-// 4. Named function component
-export function SearchButton() {
-  const { styles } = useStyles();
-  const navigation =
-    useNavigation<NativeStackNavigationProp<SearchStackParamList>>();
-  const ariaLabel = useString('amity_chat_search_placeholder');
-
-  return (
-    <Pressable
-      style={styles.iconButton}
-      accessibilityRole="button"
-      accessibilityLabel={ariaLabel}
-      onPress={() => navigation.navigate('AmitySearchChannelPage')}
-    >
-      <AmityIcon
-        name="search-r"
-        size={24}
-        tokenColor={AmityColorToken.IconIconButtonFilledSecondaryDefault}
-      />
-    </Pressable>
-  );
-}

package/src/chat/features/home/elements/SearchButton/index.ts

@@ -1 +0,0 @@
-export { SearchButton } from './SearchButton';

package/src/chat/features/home/elements/SearchButton/styles.ts

@@ -1,27 +0,0 @@
-// Styles for SearchButton — the filled secondary search icon button.
-// Web: Button.Icon styleType="filled" hierarchy="secondary" size 32. Mirrors the
-// CreateChatMenu "+" button geometry (32px circle, filled secondary surface).
-// Colours via design tokens (no hardcoded hex).
-
-import { StyleSheet } from 'react-native';
-import { useToken } from '../../../../../core/design/theme/useToken';
-import { AmityColorToken } from '../../../../../core/design/tokens/amity-color-tokens';
-
-export const useStyles = () => {
-  const token = useToken();
-
-  const styles = StyleSheet.create({
-    iconButton: {
-      width: 32,
-      height: 32,
-      borderRadius: 16,
-      alignItems: 'center',
-      justifyContent: 'center',
-      backgroundColor: token(
-        AmityColorToken.SurfaceIconButtonFilledSecondaryEnabled
-      ),
-    },
-  });
-
-  return { styles, token };
-};

package/src/chat/features/home/hooks/index.ts

@@ -1 +0,0 @@
-export { usePushNotificationEnabled } from './usePushNotificationEnabled';

package/src/chat/features/home/hooks/usePushNotificationEnabled.ts

@@ -1,35 +0,0 @@
-// usePushNotificationEnabled — ported from AmityUIKitIOS AmityChatHomeViewModel
-// (release/4.25.0, fetchPushNotificationSettings). The chat-home banner "Push
-// notifications have been disabled by admin" shows when push is disabled at the
-// network/admin level OR the chat module's push is disabled. Fetches the
-// user-level notification settings once and computes
-// `settings.isEnabled && chatModule.isEnabled`. Defaults to enabled (no banner)
-// before the fetch resolves and on error, exactly like iOS.
-
-import { useEffect, useState } from 'react';
-import { Client } from '@amityco/ts-sdk-react-native';
-
-export function usePushNotificationEnabled(): boolean {
-  const [enabled, setEnabled] = useState(true);
-
-  useEffect(() => {
-    let active = true;
-    (async () => {
-      try {
-        const settings = await Client.notifications().user().getSettings();
-        const chatModule = settings.modules.find(
-          (m) => m.moduleName === ('chat' as Amity.UserNotificationModuleName)
-        );
-        const chatModuleEnabled = chatModule?.isEnabled ?? true;
-        if (active) setEnabled(settings.isEnabled && chatModuleEnabled);
-      } catch {
-        if (active) setEnabled(true);
-      }
-    })();
-    return () => {
-      active = false;
-    };
-  }, []);
-
-  return enabled;
-}

package/src/chat/features/home/index.ts

@@ -1,3 +0,0 @@
-export { ChatHome } from './ChatHome';
-export type { ChatHomeProps } from './ChatHome';
-export * from './components';

package/src/chat/features/home/styles.ts

@@ -1,25 +0,0 @@
-// Styles for ChatHome. The screen is a vertical stack (header, tab bar, list);
-// the tab bar sits on the list surface (web `--asc-color-surface-list-default`).
-
-import { StyleSheet } from 'react-native';
-import { useToken } from '../../../core/design/theme/useToken';
-import { AmityColorToken } from '../../../core/design/tokens/amity-color-tokens';
-
-export const useStyles = () => {
-  const token = useToken();
-
-  const styles = StyleSheet.create({
-    container: {
-      flex: 1,
-      backgroundColor: token(AmityColorToken.SurfaceListDefaultDefault),
-    },
-    tabsWrapper: {
-      backgroundColor: token(AmityColorToken.SurfaceListDefaultDefault),
-    },
-    listWrapper: {
-      flex: 1,
-    },
-  });
-
-  return { styles };
-};

package/src/chat/features/search/SearchChannel.tsx

@@ -1,68 +0,0 @@
-// SearchChannel — ported from AmityUiKitWeb v4/chat/features/search/SearchChannel.
-// The chat-search feature root: a search Header over a Chats/Messages tab switch.
-//
-// RN adaptations from web:
-//   - Web's Tabs molecule rendered the active panel itself (via each tab's
-//     `content` render-prop). The RN Tabs molecule is the bar only, so this
-//     composes the bar + the active panel manually (mirrors MemberTabs).
-//   - Web's two result lists live at ~/chat/features/search/components; the RN port
-//     places them at chat/components (AmitySearchChannelResults /
-//     AmitySearchMessageResults per the parity manifest).
-
-// 1. React / RN imports
-import { View } from 'react-native';
-
-// 2. Internal imports (relative)
-import { Tabs } from '../../../core/design/molecules/Tabs';
-import { useString } from '../../../core/localization';
-import { SEARCH_TAB } from '../../constants';
-import { AmitySearchChannelResults } from '../../components/AmitySearchChannelResults';
-import { AmitySearchMessageResults } from '../../components/AmitySearchMessageResults';
-import { Header } from './components';
-import { useSearchChannel } from './hooks';
-import { useStyles } from './styles';
-
-type SearchTabValue = (typeof SEARCH_TAB)[keyof typeof SEARCH_TAB];
-
-// 3. Named function component
-export function SearchChannel() {
-  const { styles } = useStyles();
-  const {
-    searchText,
-    setSearchText,
-    debouncedQuery,
-    clearSearch,
-    cancel,
-    activeTab,
-    setActiveTab,
-  } = useSearchChannel();
-  const chatsTabLabel = useString('amity_chat_search_tab_chats');
-  const messagesTabLabel = useString('amity_chat_search_tab_messages');
-
-  return (
-    <View style={styles.searchChannel}>
-      <Header
-        searchText={searchText}
-        onSearchTextChange={setSearchText}
-        onClear={clearSearch}
-        onCancel={cancel}
-      />
-      <Tabs
-        variant="underlined"
-        value={activeTab}
-        onChange={(value) => setActiveTab(value as SearchTabValue)}
-        tabs={[
-          { value: SEARCH_TAB.CHATS, label: chatsTabLabel },
-          { value: SEARCH_TAB.MESSAGES, label: messagesTabLabel },
-        ]}
-      />
-      <View style={styles.panel}>
-        {activeTab === SEARCH_TAB.CHATS ? (
-          <AmitySearchChannelResults query={debouncedQuery} />
-        ) : (
-          <AmitySearchMessageResults query={debouncedQuery} />
-        )}
-      </View>
-    </View>
-  );
-}

package/src/chat/features/search/components/Header/Header.tsx

@@ -1,61 +0,0 @@
-// Header — ported from AmityUiKitWeb v4/chat/features/search/components/Header.
-// The chat-search top bar: a flexible SearchInput plus a trailing "Cancel" button.
-//
-// RN adaptations from web:
-//   - Web `Button.Main styleType="ghost" hierarchy="primary" size="sm"` → the RN
-//     Button atom with `hierarchy="tertiary"` (the ghost/primary text variant),
-//     matching the edit-group-profile header.
-//   - Web CSS `position: sticky` is inherent to RN's non-scrolling header row.
-
-// 1. React / RN imports
-import { View } from 'react-native';
-
-// 2. Internal imports (relative)
-import { Button } from '../../../../../core/design/atoms/Button';
-import { SearchInput } from '../../../../../core/design/molecules/SearchInput';
-import { useString } from '../../../../../core/localization';
-import { SEARCH_MAX_QUERY_LENGTH } from '../../../../constants';
-import { useStyles } from './styles';
-
-// 3. Types
-type HeaderProps = {
-  searchText: string;
-  onSearchTextChange: (value: string) => void;
-  onClear: () => void;
-  onCancel: () => void;
-};
-
-// 4. Named function component
-export function Header({
-  searchText,
-  onSearchTextChange,
-  onClear,
-  onCancel,
-}: HeaderProps) {
-  const { styles } = useStyles();
-  const placeholder = useString('amity_chat_search_placeholder');
-  const cancelLabel = useString('amity_chat_cancel');
-
-  return (
-    <View style={styles.header}>
-      <View style={styles.input}>
-        <SearchInput
-          value={searchText}
-          onChange={onSearchTextChange}
-          onClear={onClear}
-          placeholder={placeholder}
-          accessibilityLabel={placeholder}
-          maxLength={SEARCH_MAX_QUERY_LENGTH}
-        />
-      </View>
-      <Button
-        hierarchy="tertiary"
-        tone="default"
-        size="sm"
-        label={cancelLabel}
-        style={styles.cancel}
-        onPress={onCancel}
-      />
-    </View>
-  );
-}

package/src/chat/features/search/components/Header/index.ts

@@ -1 +0,0 @@
-export { Header } from './Header';

package/src/chat/features/search/components/Header/styles.ts

@@ -1,33 +0,0 @@
-// Styles for the chat-search Header — ported from AmityUiKitWeb Header.module.css.
-// header: row, align center, padding 0.75rem 1rem → 12/16, page-background surface.
-// input: flex 1 1 auto, min-width 0 → flex:1 with a minWidth:0.
-
-import { StyleSheet } from 'react-native';
-import { useToken } from '../../../../../core/design/theme/useToken';
-import { AmityColorToken } from '../../../../../core/design/tokens/amity-color-tokens';
-
-export const useStyles = () => {
-  const token = useToken();
-
-  const styles = StyleSheet.create({
-    header: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      paddingVertical: 12,
-      paddingHorizontal: 16,
-      backgroundColor: token(AmityColorToken.SurfacePageBackgroundDefault),
-    },
-    input: {
-      flex: 1,
-      minWidth: 0,
-    },
-    // The Button atom defaults to alignSelf:'flex-start', which overrides the
-    // row's alignItems:center and pins Cancel to the top — re-center it against
-    // the taller search input.
-    cancel: {
-      alignSelf: 'center',
-    },
-  });
-
-  return { styles, token };
-};

package/src/chat/features/search/components/index.ts

@@ -1,5 +0,0 @@
-// Web re-exports Header + SearchChannelList + SearchMessageList here. In the RN
-// port the two result lists live under chat/components (AmitySearchChannelResults
-// / AmitySearchMessageResults per the parity manifest), so this barrel exports
-// only the search Header.
-export { Header } from './Header';

package/src/chat/features/search/hooks/index.ts

@@ -1 +0,0 @@
-export { useSearchChannel } from './useSearchChannel';

package/src/chat/features/search/hooks/useSearchChannel.ts

@@ -1,50 +0,0 @@
-// useSearchChannel — ported from AmityUiKitWeb
-// v4/chat/features/search/hooks/useSearchChannel.
-//
-// Web reads its search state from a `ChatSearchProvider` context and calls
-// `useChatNavigation().pop()` to cancel. RN has no ChatSearchProvider, so this
-// hook owns the state locally (searchText + debounced query + active tab), the
-// same pattern MemberTabs uses (useState + a setTimeout debounce). `cancel`
-// clears the query and pops the navigation stack.
-
-import { useEffect, useState } from 'react';
-
-import { useChatNavigation } from '../../../hooks/useChatNavigation';
-import { SEARCH_DEBOUNCE_MS, SEARCH_TAB } from '../../../constants';
-
-type SearchTabValue = (typeof SEARCH_TAB)[keyof typeof SEARCH_TAB];
-
-export function useSearchChannel() {
-  const { pop } = useChatNavigation();
-  const [searchText, setSearchText] = useState('');
-  const [debouncedQuery, setDebouncedQuery] = useState('');
-  const [activeTab, setActiveTab] = useState<SearchTabValue>(SEARCH_TAB.CHATS);
-
-  useEffect(() => {
-    const timer = setTimeout(
-      () => setDebouncedQuery(searchText.trim()),
-      SEARCH_DEBOUNCE_MS
-    );
-    return () => clearTimeout(timer);
-  }, [searchText]);
-
-  function clearSearch() {
-    setSearchText('');
-    setDebouncedQuery('');
-  }
-
-  function cancel() {
-    clearSearch();
-    pop();
-  }
-
-  return {
-    searchText,
-    setSearchText,
-    debouncedQuery,
-    clearSearch,
-    cancel,
-    activeTab,
-    setActiveTab,
-  };
-}

package/src/chat/features/search/index.ts

@@ -1 +0,0 @@
-export { SearchChannel } from './SearchChannel';

package/src/chat/features/search/styles.ts

@@ -1,25 +0,0 @@
-// Styles for SearchChannel — ported from AmityUiKitWeb SearchChannel.module.css.
-// searchChannel: column, min-height 100svh → flex:1, page-background surface.
-// The web tabList `position: sticky` is inherent to the non-scrolling RN layout;
-// `panel` fills the remaining space so the active list can scroll within it.
-
-import { StyleSheet } from 'react-native';
-import { useToken } from '../../../core/design/theme/useToken';
-import { AmityColorToken } from '../../../core/design/tokens/amity-color-tokens';
-
-export const useStyles = () => {
-  const token = useToken();
-
-  const styles = StyleSheet.create({
-    searchChannel: {
-      flex: 1,
-      flexDirection: 'column',
-      backgroundColor: token(AmityColorToken.SurfacePageBackgroundDefault),
-    },
-    panel: {
-      flex: 1,
-    },
-  });
-
-  return { styles, token };
-};

package/src/chat/features/shared/components/AddTile/AddTile.tsx

@@ -1,44 +0,0 @@
-// AddTile — ported from AmityUiKitWeb features/shared/components/AddTile.
-// A small "add" tile: an icon-only plus button above a single-line caption label.
-// DEVIATION FROM WEB: web renders Button.Icon (filled/secondary/40px, a filled
-// circle). Per user intent the plus button is borderless — icon only, no filled
-// background — matching the SelectedMember close/cross button
-// (transparent/primary). `onClick`→`onPress`.
-
-// 1. React / RN imports
-import { View } from 'react-native';
-
-// 2. Internal imports
-import { Button } from '../../../../../core/design/atoms/Button';
-import { Typography } from '../../../../../core/design/components/Typography';
-import { useStyles } from './styles';
-
-// 3. Types
-type AddTileProps = {
-  onPress: () => void;
-  label?: string;
-  accessibilityLabel?: string;
-};
-
-// 4. Named function component
-export function AddTile({ onPress, label, accessibilityLabel }: AddTileProps) {
-  const { styles } = useStyles();
-
-  return (
-    <View style={styles.tile}>
-      <Button.Icon
-        icon="plus-r"
-        styleType="transparent"
-        hierarchy="primary"
-        size={40}
-        onPress={onPress}
-        accessibilityLabel={accessibilityLabel}
-      />
-      {label ? (
-        <Typography variant="caption" style={styles.name} numberOfLines={1}>
-          {label}
-        </Typography>
-      ) : null}
-    </View>
-  );
-}

package/src/chat/features/shared/components/AddTile/index.ts

@@ -1 +0,0 @@
-export { AddTile } from './AddTile';

package/src/chat/features/shared/components/AddTile/styles.ts

@@ -1,29 +0,0 @@
-// Styles for AddTile — ported from AddTile.module.css.
-// Geometry: column, center, gap 0.25rem→4, tile width 4rem→64. The plus button
-// is the Button.Icon atom rendered borderless (transparent/primary/40 — a
-// deviation from web's filled-secondary, per user intent); this style covers
-// only the tile layout + label. Label colour from Text/IconButton/Label/General.
-
-import { StyleSheet } from 'react-native';
-import { useToken } from '../../../../../core/design/theme/useToken';
-import { AmityColorToken } from '../../../../../core/design/tokens/amity-color-tokens';
-
-export const useStyles = () => {
-  const token = useToken();
-
-  const styles = StyleSheet.create({
-    tile: {
-      flexDirection: 'column',
-      alignItems: 'center',
-      gap: 4,
-      width: 64,
-    },
-    name: {
-      maxWidth: 64,
-      textAlign: 'center',
-      color: token(AmityColorToken.TextIconButtonLabelGeneral),
-    },
-  });
-
-  return { styles, token };
-};