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

package/src/chat/features/group/members/components/MemberTabs/MemberTabs.tsx

@@ -1,86 +0,0 @@
-// MemberTabs — ported from AmityUiKitWeb
-// v4/chat/features/group/members/components/MemberTabs.
-//
-// Members / Moderators tabs, each with a search bar over a MemberList. Web's
-// react-aria Tabs rendered the panel content itself; the RN Tabs molecule is the
-// bar only, so this composes the bar + the active panel manually. Web debounced
-// via react-use `useDebounce`; RN uses a plain setTimeout effect (react-use is
-// not a dependency here), matching useCreateConversation.
-
-// 1. React / RN imports
-import { useEffect, useState } from 'react';
-import { View } from 'react-native';
-
-// 2. Internal imports
-import { Tabs } from '../../../../../../core/design/molecules/Tabs';
-import { SearchInput } from '../../../../../../core/design/molecules/SearchInput';
-import { useString } from '../../../../../../core/localization';
-import { MemberList } from '../MemberList';
-import { useStyles } from './styles';
-
-const SEARCH_DEBOUNCE_MS = 300;
-
-export enum MembershipsTab {
-  Members = 'members',
-  Moderators = 'moderators',
-}
-
-// 3. Types
-type MemberTabsProps = {
-  channelId: string;
-};
-
-// 4. Named function component
-export function MemberTabs({ channelId }: MemberTabsProps) {
-  const { styles } = useStyles();
-  const [activeTab, setActiveTab] = useState<string>(MembershipsTab.Members);
-  const [searchText, setSearchText] = useState('');
-  const [debouncedSearch, setDebouncedSearch] = useState('');
-
-  const searchPlaceholder = useString('amity_chat_search_placeholder');
-  const membersTabLabel = useString('amity_chat_member_tab_members');
-  const moderatorsTabLabel = useString('amity_chat_member_tab_moderators');
-
-  useEffect(() => {
-    const timer = setTimeout(
-      () => setDebouncedSearch(searchText),
-      SEARCH_DEBOUNCE_MS
-    );
-    return () => clearTimeout(timer);
-  }, [searchText]);
-
-  function handleTabChange(value: string) {
-    setActiveTab(value);
-    setSearchText('');
-    setDebouncedSearch('');
-  }
-
-  const onlyModerators = activeTab === MembershipsTab.Moderators;
-
-  return (
-    <View style={styles.container}>
-      <Tabs
-        variant="underlined"
-        value={activeTab}
-        onChange={handleTabChange}
-        tabs={[
-          { value: MembershipsTab.Members, label: membersTabLabel },
-          { value: MembershipsTab.Moderators, label: moderatorsTabLabel },
-        ]}
-      />
-      <View style={styles.searchBar}>
-        <SearchInput
-          value={searchText}
-          onChange={setSearchText}
-          placeholder={searchPlaceholder}
-          accessibilityLabel={searchPlaceholder}
-        />
-      </View>
-      <MemberList
-        channelId={channelId}
-        search={debouncedSearch}
-        onlyModerators={onlyModerators}
-      />
-    </View>
-  );
-}

package/src/chat/features/group/members/components/MemberTabs/index.ts

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

package/src/chat/features/group/members/components/MemberTabs/styles.ts

@@ -1,18 +0,0 @@
-// Styles for MemberTabs — ported from AmityUiKitWeb MemberTabs.module.css.
-// Column layout; search bar padding 0.5rem 1rem → 8/16.
-
-import { StyleSheet } from 'react-native';
-
-export const useStyles = () => {
-  const styles = StyleSheet.create({
-    container: {
-      flex: 1,
-    },
-    searchBar: {
-      paddingVertical: 8,
-      paddingHorizontal: 16,
-    },
-  });
-
-  return { styles };
-};

package/src/chat/features/group/members/components/index.ts

@@ -1,4 +0,0 @@
-export * from './Header';
-export * from './MemberItem';
-export * from './MemberList';
-export * from './MemberTabs';

package/src/chat/features/group/members/hooks/index.ts

@@ -1 +0,0 @@
-export * from './useGroupMembers';

package/src/chat/features/group/members/hooks/useGroupMembers.ts

@@ -1,36 +0,0 @@
-// useGroupMembers — ported from AmityUiKitWeb
-// v4/chat/features/group/members/hooks/useGroupMembers.
-//
-// Web computed the viewer's moderator status from `useChannelMyMembership` and
-// navigated via the in-app ChatNavigationProvider (pop / push AddGroupMemberPage).
-// RN reads moderator status through the shared `useChannelMyMembership` hook and
-// takes navigation as callback props (the hosting page owns the stack, which is
-// out of scope here): `onBack` defaults to `useChatNavigation().pop()`.
-
-import { useChannelMyMembership } from '../../../../hooks/useChannelMyMembership';
-import { useChatNavigation } from '../../../../hooks/useChatNavigation';
-
-export type UseGroupMembersParams = {
-  channelId: string;
-  onBack?: () => void;
-  onAddMember?: () => void;
-};
-
-export function useGroupMembers({
-  channelId,
-  onBack,
-  onAddMember,
-}: UseGroupMembersParams) {
-  const { pop } = useChatNavigation();
-  const { isViewerModerator } = useChannelMyMembership(channelId);
-
-  const handleBack = onBack ?? pop;
-  const handleOpenAddMember = onAddMember ?? (() => {});
-
-  return {
-    channelId,
-    isViewerModerator,
-    handleBack,
-    handleOpenAddMember,
-  };
-}

package/src/chat/features/group/members/index.ts

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

package/src/chat/features/group/members/styles.ts

@@ -1,19 +0,0 @@
-// Styles for GroupMembers — ported from AmityUiKitWeb GroupMembers.module.css.
-// A full-height column filling the page background.
-
-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({
-    groupMembers: {
-      flex: 1,
-      backgroundColor: token(AmityColorToken.SurfacePageBackgroundDefault),
-    },
-  });
-
-  return { styles, token };
-};

package/src/chat/features/group/notification-preference/NotificationPreference.tsx

@@ -1,66 +0,0 @@
-// NotificationPreference — RN port of AmityUiKitWeb
-// v4/chat/features/group/notification-preference/NotificationPreference. A TopBar
-// over a single "allow notifications" toggle row. When the channel is silenced by
-// a moderator the toggle is shown read-only (reflecting the persisted value).
-//
-// RN adaptations from web:
-//   - `<div>` → View.
-//   - The web `Toggle` atom is skipped in RN (the parity map maps it to the native
-//     `Switch`), so `AllowNotifications` renders an RN `Switch`; the Controller
-//     wiring is preserved 1:1.
-//   - iOS-ALIGNED DEVIATION FROM WEB: web hard-codes `showDisabledByModeratorBanner
-//     = false` (the banner never renders on web), but iOS shows a moderator banner
-//     whenever the channel is silenced (`notificationMode === silent`), and cleverden
-//     REQ-004 mandates it. Since this feature is ported from iOS, the banner renders
-//     on `isSilent` (the toggle is already read-only in that state).
-
-// 1. React / RN imports
-import { View } from 'react-native';
-
-// 2. Third-party imports
-import { Controller } from 'react-hook-form';
-
-// 3. Internal imports (relative)
-import { TopBar } from '../../../elements/TopBar';
-import { useString } from '../../../../core/localization';
-import { AllowNotifications } from './components/AllowNotifications/AllowNotifications';
-import { DisabledByModeratorBanner } from './components/DisabledByModeratorBanner/DisabledByModeratorBanner';
-import {
-  useNotificationPreference,
-  type NotificationPreferenceProps,
-} from './hooks/useNotificationPreference';
-import { useStyles } from './styles';
-
-// 4. Named function component
-export function NotificationPreference({
-  channelId,
-}: NotificationPreferenceProps) {
-  const { styles } = useStyles();
-  const { control, handleClose, handleSave, isSilent, persistedIsEnabled } =
-    useNotificationPreference({ channelId });
-  const pageTitle = useString('amity_chat_group_notif_pref_navbar_title');
-
-  return (
-    <View style={styles.container}>
-      <TopBar title={pageTitle} leadingType="back" onLeading={handleClose} />
-      {isSilent && <DisabledByModeratorBanner />}
-      {isSilent ? (
-        <AllowNotifications isSelected={persistedIsEnabled} isDisabled />
-      ) : (
-        <Controller
-          control={control}
-          name="isEnabled"
-          render={({ field: { value, onChange } }) => (
-            <AllowNotifications
-              isSelected={value}
-              onChange={(next) => {
-                onChange(next);
-                handleSave();
-              }}
-            />
-          )}
-        />
-      )}
-    </View>
-  );
-}

package/src/chat/features/group/notification-preference/components/AllowNotifications/AllowNotifications.tsx

@@ -1,75 +0,0 @@
-// AllowNotifications — RN port of AmityUiKitWeb
-// v4/chat/features/group/notification-preference/components/AllowNotifications.
-// A list row: title + description on the left, an on/off toggle on the right.
-//
-// RN adaptations from web:
-//   - `<div>` → View; `data-disabled` styling → conditional `disabled` text styles.
-//   - The web `Toggle` atom is skipped in RN (parity map → native `Switch`); the
-//     Switch is tinted with the Surface/Toggle design tokens so the on/off/thumb
-//     colours match the web toggle.
-
-// 1. React / RN imports
-import { Switch, View } from 'react-native';
-
-// 2. Internal imports (relative)
-import { Typography } from '../../../../../../core/design/components/Typography';
-import { AmityColorToken } from '../../../../../../core/design/tokens/amity-color-tokens';
-import { useString } from '../../../../../../core/localization';
-import { useStyles } from './styles';
-
-// 3. Types
-type AllowNotificationsProps = {
-  isSelected: boolean;
-  isDisabled?: boolean;
-  onChange?: (value: boolean) => void;
-};
-
-// 4. Named function component
-export function AllowNotifications({
-  isSelected,
-  isDisabled = false,
-  onChange,
-}: AllowNotificationsProps) {
-  const { styles, token } = useStyles();
-  const title = useString('amity_chat_group_notification_preference_title');
-  const description = useString(
-    'amity_chat_group_notification_preference_description'
-  );
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.textBlock}>
-        <Typography
-          variant="bodyBold"
-          style={isDisabled ? styles.titleDisabled : styles.title}
-        >
-          {title}
-        </Typography>
-        <Typography
-          variant="caption"
-          style={isDisabled ? styles.descriptionDisabled : styles.description}
-        >
-          {description}
-        </Typography>
-      </View>
-      <Switch
-        value={isSelected}
-        disabled={isDisabled}
-        onValueChange={onChange}
-        accessibilityLabel={title}
-        thumbColor={token(
-          isSelected
-            ? AmityColorToken.SurfaceToggleThumbActiveEnabled
-            : AmityColorToken.SurfaceToggleThumbInactiveEnabled
-        )}
-        ios_backgroundColor={token(
-          AmityColorToken.SurfaceToggleBackgroundInactiveEnabled
-        )}
-        trackColor={{
-          true: token(AmityColorToken.SurfaceToggleBackgroundActiveEnabled),
-          false: token(AmityColorToken.SurfaceToggleBackgroundInactiveEnabled),
-        }}
-      />
-    </View>
-  );
-}

package/src/chat/features/group/notification-preference/components/AllowNotifications/index.ts

@@ -1 +0,0 @@
-export * from './AllowNotifications';

package/src/chat/features/group/notification-preference/components/AllowNotifications/styles.ts

@@ -1,45 +0,0 @@
-// Styles for AllowNotifications — ported from AmityUiKitWeb
-// v4/chat/features/group/notification-preference/components/AllowNotifications/AllowNotifications.module.css.
-// rem → px×16; colours via design tokens (no hardcoded hex). The `[data-disabled]`
-// text colours become the `*Disabled` style variants.
-
-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({
-    // .allowNotifications — row, 0.75rem gap, 1rem padding, list surface.
-    container: {
-      flexDirection: 'row',
-      gap: 12,
-      padding: 16,
-      alignItems: 'flex-start',
-      backgroundColor: token(AmityColorToken.SurfaceListDefaultDefault),
-    },
-    // .allowNotifications__textBlock — grows, 0.125rem gap.
-    textBlock: {
-      flex: 1,
-      flexDirection: 'column',
-      gap: 2,
-      minWidth: 0,
-    },
-    title: {
-      color: token(AmityColorToken.TextListHeaderDefaultDefault),
-    },
-    description: {
-      color: token(AmityColorToken.TextListTextDescriptionDefaultDefault),
-    },
-    // [data-disabled='true'] variants.
-    titleDisabled: {
-      color: token(AmityColorToken.TextListHeaderDefaultDisabled),
-    },
-    descriptionDisabled: {
-      color: token(AmityColorToken.TextListTextDescriptionDefaultDisabled),
-    },
-  });
-
-  return { styles, token };
-};

package/src/chat/features/group/notification-preference/components/DisabledByModeratorBanner/DisabledByModeratorBanner.tsx

@@ -1,42 +0,0 @@
-// DisabledByModeratorBanner — RN port of AmityUiKitWeb
-// v4/chat/features/group/notification-preference/components/DisabledByModeratorBanner.
-// A centered subdued banner (bell-slash icon + caption) shown when notifications
-// were silenced by a moderator.
-//
-// RN adaptations from web:
-//   - `<div role="status">` → View with `accessibilityRole="alert"` (RN has no
-//     "status" role; "alert" is the closest live-region role).
-//   - Web `BellSlash` (its default = Regular variant) → the SoT `bell-slash-r`
-//     icon (byte-identical to web's Regular path).
-//   - Web's Subdue banner icon/text tokens are not yet in the RN SoT catalog; the
-//     colour-identical GreyBG variants are used (documented in the fidelity
-//     checker's allowlist).
-
-// 1. React / RN imports
-import { View } from 'react-native';
-
-// 2. Internal imports (relative)
-import { Typography } from '../../../../../../core/design/components/Typography';
-import { AmityIcon } from '../../../../../../core/design/icons';
-import { AmityColorToken } from '../../../../../../core/design/tokens/amity-color-tokens';
-import { useString } from '../../../../../../core/localization';
-import { useStyles } from './styles';
-
-// 3. Named function component
-export function DisabledByModeratorBanner() {
-  const { styles } = useStyles();
-  const text = useString('amity_chat_group_notifications_disabled');
-
-  return (
-    <View style={styles.container} accessibilityRole="alert">
-      <AmityIcon
-        name="bell-slash-r"
-        size={18}
-        tokenColor={AmityColorToken.IconBannerSubdueDescriptionGeneral}
-      />
-      <Typography variant="caption" style={styles.text}>
-        {text}
-      </Typography>
-    </View>
-  );
-}

package/src/chat/features/group/notification-preference/components/DisabledByModeratorBanner/index.ts

@@ -1 +0,0 @@
-export * from './DisabledByModeratorBanner';

package/src/chat/features/group/notification-preference/components/DisabledByModeratorBanner/styles.ts

@@ -1,33 +0,0 @@
-// Styles for DisabledByModeratorBanner — ported from AmityUiKitWeb
-// v4/chat/features/group/notification-preference/components/DisabledByModeratorBanner/DisabledByModeratorBanner.module.css.
-// rem → px×16; colours via design tokens (no hardcoded hex). The Subdue banner
-// surface has a direct RN token; the icon/text Subdue colours use the
-// colour-identical GreyBG variants (see fidelity allowlist).
-
-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({
-    // .disabledByModeratorBanner — centered row, 0.25rem gap, 0.75rem/1rem padding.
-    container: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'center',
-      gap: 4,
-      paddingVertical: 12,
-      paddingHorizontal: 16,
-      backgroundColor: token(AmityColorToken.SurfaceBannerSubdueGeneral),
-    },
-    // .disabledByModeratorBanner__text — centered caption.
-    text: {
-      color: token(AmityColorToken.TextBannerSubdueTextDescriptionGeneral),
-      textAlign: 'center',
-    },
-  });
-
-  return { styles, token };
-};

package/src/chat/features/group/notification-preference/components/index.ts

@@ -1,2 +0,0 @@
-export * from './AllowNotifications';
-export * from './DisabledByModeratorBanner';

package/src/chat/features/group/notification-preference/hooks/index.ts

@@ -1 +0,0 @@
-export * from './useNotificationPreference';

package/src/chat/features/group/notification-preference/hooks/useNotificationPreference.ts

@@ -1,163 +0,0 @@
-// useNotificationPreference — RN port of AmityUiKitWeb
-// v4/chat/features/group/notification-preference/hooks/useNotificationPreference.
-// Owns the "allow notifications" toggle: the persisted channel push-notification
-// setting, the enable/disable mutation, and the moderator-silenced state.
-//
-// RN adaptations from web:
-//   - Web imports `useChannelPushNotificationQuery` / `useChannelObject` from
-//     `chat/hooks/queries` + `chat/hooks/objects`. Those query layers have no RN
-//     counterpart (they are not tracked port units), so the same calls are made
-//     inline here with the identical SDK surface:
-//       • read/enable/disable → `Client.notifications().channel(id)` (the exact
-//         API the RN community notification port already uses).
-//       • `channel.notificationMode` (for `isSilent`) → an inline
-//         `ChannelRepository.getChannel` live subscription gated on
-//         `useAuth().isConnected` (the sibling edit-permission port's pattern).
-//   - react-hook-form + zod + @tanstack/react-query are all kept 1:1 with web
-//     (all three are present in the RN app).
-//   - Web `useChatNavigation().pop()` → React Navigation `goBack`.
-//   - Web `useNotifications('chat').success/error` → the redux toast (`useToast`).
-
-// 1. React / RN imports
-import { useEffect, useState } from 'react';
-
-// 2. Third-party imports
-import {
-  ChannelRepository,
-  Client,
-  AmityChannelNotificationModeEnum,
-} from '@amityco/ts-sdk-react-native';
-import { useMutation, useQuery } from '@tanstack/react-query';
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import * as z from 'zod';
-import { useNavigation } from '@react-navigation/native';
-import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
-
-// 3. Internal imports (relative)
-import useAuth from '../../../../../core/hooks/useAuth';
-import { useString } from '../../../../../core/localization';
-import { useToast } from '../../../../../core/stores/slices/toastSlice';
-
-// Web `CHANNEL_PUSH_NOTIFICATION_QUERY_KEY`.
-const CHANNEL_PUSH_NOTIFICATION_QUERY_KEY = 'channelPushNotification';
-
-const schema = z.object({
-  isEnabled: z.boolean(),
-});
-
-type NotificationPreferenceForm = z.infer<typeof schema>;
-
-// 4. Types
-export type NotificationPreferenceProps = {
-  channelId: string;
-};
-
-type UpdateChannelPushNotificationPayload = {
-  channelId: string;
-  isEnabled: boolean;
-};
-
-// 5. Hook
-export function useNotificationPreference({
-  channelId,
-}: NotificationPreferenceProps) {
-  const { isConnected } = useAuth();
-  const { showToast } = useToast();
-  const navigation = useNavigation<NativeStackNavigationProp<any>>();
-
-  // Web `useChannelPushNotificationQuery` mute/unmute toasts.
-  const muteSuccess = useString('amity_chat_action_mute');
-  const muteError = useString('amity_chat_action_mute_failed');
-  const unmuteSuccess = useString('amity_chat_action_unmute');
-  const unmuteError = useString('amity_chat_action_unmute_failed');
-
-  // Web `useChannelObject` → inline live channel subscription (for notificationMode).
-  const [channel, setChannel] = useState<Amity.Channel | undefined>(undefined);
-  const [isChannelLoading, setIsChannelLoading] = useState(true);
-
-  useEffect(() => {
-    if (!isConnected || !channelId) return undefined;
-    setIsChannelLoading(true);
-    const unsub = ChannelRepository.getChannel(
-      channelId,
-      ({ data, loading }) => {
-        if (data) setChannel(data);
-        if (loading === false) setIsChannelLoading(false);
-      }
-    );
-    return () => {
-      unsub();
-    };
-  }, [isConnected, channelId]);
-
-  // Web `useChannelPushNotificationQuery` — read the channel push setting.
-  const {
-    data,
-    isLoading: isSettingsLoading,
-    refetch,
-  } = useQuery({
-    queryKey: [CHANNEL_PUSH_NOTIFICATION_QUERY_KEY, channelId],
-    queryFn: () => Client.notifications().channel(channelId).getSettings(),
-    enabled: !!channelId,
-  });
-
-  const persistedIsEnabled = data?.isEnabled ?? true;
-
-  const { mutateAsync } = useMutation<
-    void,
-    Error,
-    UpdateChannelPushNotificationPayload
-  >({
-    mutationFn: ({ channelId: id, isEnabled }) =>
-      isEnabled
-        ? Client.notifications().channel(id).enable()
-        : Client.notifications().channel(id).disable(),
-    onSuccess: (_, variables) => {
-      refetch();
-      showToast({
-        message: variables.isEnabled ? unmuteSuccess : muteSuccess,
-        type: 'success',
-        variant: 'custom',
-      });
-    },
-    onError: (_, variables) => {
-      showToast({
-        message: variables.isEnabled ? unmuteError : muteError,
-        type: 'failed',
-        variant: 'custom',
-      });
-    },
-  });
-
-  const isSilent =
-    channel?.notificationMode === AmityChannelNotificationModeEnum.Silent;
-  const isLoading = isChannelLoading || isSettingsLoading;
-
-  const { control, handleSubmit } = useForm<NotificationPreferenceForm>({
-    mode: 'onChange',
-    resolver: zodResolver(schema),
-    values: {
-      isEnabled: persistedIsEnabled,
-    },
-  });
-
-  function handleClose() {
-    navigation.goBack();
-  }
-
-  const handleSave = handleSubmit(
-    async (values: NotificationPreferenceForm) => {
-      await mutateAsync({ channelId, isEnabled: values.isEnabled });
-    }
-  );
-
-  return {
-    control,
-    isLoading,
-    isSilent,
-    persistedIsEnabled,
-    handleClose,
-    handleSave,
-  };
-}

package/src/chat/features/group/notification-preference/index.ts

@@ -1,2 +0,0 @@
-export { NotificationPreference } from './NotificationPreference';
-export type { NotificationPreferenceProps } from './hooks/useNotificationPreference';

package/src/chat/features/group/notification-preference/styles.ts

@@ -1,22 +0,0 @@
-// Styles for NotificationPreference — ported from AmityUiKitWeb
-// v4/chat/features/group/notification-preference/NotificationPreference.module.css.
-// rem → px×16; 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({
-    // .notificationPreference — full-height page surface.
-    container: {
-      flex: 1,
-      width: '100%',
-      backgroundColor: token(AmityColorToken.SurfacePageBackgroundDefault),
-    },
-  });
-
-  return { styles, token };
-};