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

package/src/chat/features/group/chat/hooks/useGroupChat.ts

@@ -1,85 +0,0 @@
-// useGroupChat — ported from AmityUiKitWeb v4/chat/features/group/chat/hooks/useGroupChat.
-// The group-thread orchestrator: same shared useChatMessage engine as a 1-1
-// conversation, plus group specifics — live channel object, the viewer's membership
-// (banned / muted / moderator), the moderator id set, the muted-banner rule, and the
-// open-settings navigation. Mirrors useConversation but for community channels.
-
-import { useEffect, useMemo, useState } from 'react';
-import { ChannelRepository } from '@amityco/ts-sdk-react-native';
-
-import useAuth from '../../../../../core/hooks/useAuth';
-import { useChannelMembersCollection } from '../../../../hooks/collections/useChannelMembersCollection';
-import { useChannelMyMembership } from '../../../../hooks/useChannelMyMembership';
-import { useChatNavigation } from '../../../../hooks/useChatNavigation';
-import { useChatMessage } from '../../../shared/hooks/useChatMessage';
-
-const CHANNEL_MODERATOR = 'channel-moderator';
-
-export type UseGroupChatParams = {
-  channelId?: string;
-  isJustCreated?: boolean;
-};
-
-export function useGroupChat({ channelId, isJustCreated }: UseGroupChatParams) {
-  const { isConnected } = useAuth();
-  const { push } = useChatNavigation();
-
-  const [channel, setChannel] = useState<Amity.Channel | undefined>(undefined);
-  useEffect(() => {
-    if (!isConnected || !channelId) return undefined;
-    const unsub = ChannelRepository.getChannel(channelId, ({ data }) => {
-      if (data) setChannel(data);
-    });
-    return () => {
-      unsub();
-    };
-  }, [isConnected, channelId]);
-
-  const { membership, isViewerModerator } = useChannelMyMembership(channelId);
-  const isBanned = membership?.membership === 'banned';
-  const isUserMuted = !!membership?.isMuted;
-  const isChannelMuted = !!(channel as { isMuted?: boolean } | undefined)
-    ?.isMuted;
-
-  const { members: moderators } = useChannelMembersCollection({
-    channelId: channelId ?? '',
-    roles: [CHANNEL_MODERATOR],
-  });
-  const moderatorIds = useMemo(
-    () =>
-      new Set(
-        moderators
-          .map((m) => m.userId)
-          .filter((id): id is string => typeof id === 'string')
-      ),
-    [moderators]
-  );
-
-  const showMutedBanner = isUserMuted || (isChannelMuted && !isViewerModerator);
-  const mutedVariant: 'user' | 'channel' = isUserMuted ? 'user' : 'channel';
-
-  const chatMessage = useChatMessage({
-    channelId,
-    isJustCreated,
-    enableMention: true,
-    viewerIsMutedInChannel: isUserMuted,
-  });
-
-  function handleOpenSettings() {
-    if (channelId) push('AmityGroupSettingPage', { channelId });
-  }
-
-  return {
-    ...chatMessage,
-    channel,
-    channelDisplayName: channel?.displayName,
-    isBanned,
-    isUserMuted,
-    isChannelMuted,
-    isModerator: isViewerModerator,
-    moderatorIds,
-    showMutedBanner,
-    mutedVariant,
-    handleOpenSettings,
-  };
-}

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

@@ -1,2 +0,0 @@
-export { GroupChat } from './GroupChat';
-export type { GroupChatProps } from './GroupChat';

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

@@ -1,14 +0,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({
-    container: {
-      flex: 1,
-      backgroundColor: token(AmityColorToken.SurfacePageBackgroundDefault),
-    },
-  });
-  return { styles, token };
-};

package/src/chat/features/group/create/CreateGroupChat.tsx

@@ -1,94 +0,0 @@
-// CreateGroupChat — entry component for the create-group step. Ported from
-// AmityUiKitWeb v4/chat/features/group/create/CreateGroupChat. Composes the
-// Header (title + Create) over the avatar picker, group-name field, privacy
-// chooser, and member grid.
-//
-// RN adaptations from web:
-//   - Web wraps everything in a scrolling `<form onSubmit>`; RN uses a fixed
-//     Header over a ScrollView, with `handleCreate` wired to the Header's Create
-//     button.
-//   - The RN AvatarPicker is presentational (`imageUrl`/`onPick`/`isUploading`),
-//     so it is driven by the hook's avatar state rather than a <Controller>.
-
-// 1. React / RN imports
-import { ScrollView, View } from 'react-native';
-
-// 2. Third-party imports
-import { Controller } from 'react-hook-form';
-
-// 3. Internal imports (relative)
-import { AvatarPicker } from '../../../elements/AvatarPicker';
-import { GroupNameField } from '../../../elements/GroupNameField';
-import { Header } from './components/Header/Header';
-import { MemberGrid } from './components/MemberGrid/MemberGrid';
-import { PrivacySection } from './components/PrivacySection/PrivacySection';
-import {
-  useCreateGroupChat,
-  type CreateGroupChatPageProps,
-} from './hooks/useCreateGroupChat';
-import { useStyles } from './styles';
-
-// 4. Named function component
-export function CreateGroupChat({ selectedUsers }: CreateGroupChatPageProps) {
-  const { styles } = useStyles();
-  const {
-    form,
-    currentUser,
-    avatarImageUrl,
-    isUploadingAvatar,
-    handlePickAvatar,
-    handleClose,
-    handleAddMember,
-    handleCreate,
-    isFormValid,
-  } = useCreateGroupChat({ selectedUsers });
-
-  return (
-    <View style={styles.createGroupChat}>
-      <Header
-        isFormValid={isFormValid}
-        onClose={handleClose}
-        onCreate={handleCreate}
-      />
-      <ScrollView>
-        <View style={styles.avatarWrapper}>
-          <AvatarPicker
-            imageUrl={avatarImageUrl}
-            onPick={handlePickAvatar}
-            isUploading={isUploadingAvatar}
-          />
-        </View>
-        <Controller
-          control={form.control}
-          name="name"
-          render={({ field: { onChange, value } }) => (
-            <GroupNameField value={value} onChange={onChange} optional />
-          )}
-        />
-        <Controller
-          control={form.control}
-          name="isPublic"
-          render={({ field: { onChange, value } }) => (
-            <PrivacySection isPublic={value} onChange={onChange} />
-          )}
-        />
-        <Controller
-          control={form.control}
-          name="members"
-          render={({ field }) => (
-            <MemberGrid
-              currentUser={currentUser}
-              members={field.value}
-              onAddMember={handleAddMember}
-              onRemoveMember={(userId) =>
-                field.onChange(
-                  field.value.filter((user) => user.userId !== userId)
-                )
-              }
-            />
-          )}
-        />
-      </ScrollView>
-    </View>
-  );
-}

package/src/chat/features/group/create/components/Header/Header.tsx

@@ -1,44 +0,0 @@
-// Header — create-group header. Ported from AmityUiKitWeb
-// v4/chat/features/group/create/components/Header. The shared TopBar (back) with
-// a trailing "Create" button.
-//
-// RN adaptations from web:
-//   - RN has no `<form>`, so web's `Button.Main type="submit"` becomes a `Button`
-//     (tertiary/sm — the RN analogue of web ghost/primary) wired to `onCreate`.
-
-// 1. React / RN imports (none beyond the shared units)
-
-// 2. Internal imports (relative)
-import { TopBar } from '../../../../../elements/TopBar';
-import { Button } from '../../../../../../core/design/atoms/Button';
-import { useString } from '../../../../../../core/localization';
-
-// 3. Types
-type HeaderProps = {
-  isFormValid: boolean;
-  onClose: () => void;
-  onCreate: () => void;
-};
-
-// 4. Named function component
-export function Header({ isFormValid, onClose, onCreate }: HeaderProps) {
-  const title = useString('amity_chat_create_group_title');
-  const createLabel = useString('amity_chat_create_group_button');
-
-  return (
-    <TopBar
-      title={title}
-      leadingType="back"
-      onLeading={onClose}
-      trailing={
-        <Button
-          hierarchy="tertiary"
-          size="sm"
-          label={createLabel}
-          disabled={!isFormValid}
-          onPress={onCreate}
-        />
-      }
-    />
-  );
-}

package/src/chat/features/group/create/components/Header/index.ts

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

package/src/chat/features/group/create/components/MemberGrid/MemberGrid.tsx

@@ -1,62 +0,0 @@
-// MemberGrid — the "Members" section of the create-group screen. Ported from
-// AmityUiKitWeb v4/chat/features/group/create/components/MemberGrid. Shows a
-// heading over a wrapping grid of tiles: an AddTile, the current user's YouTile,
-// and a removable SelectedMember tile per chosen member.
-//
-// RN adaptations from web:
-//   - Web's `AddTile` `ariaLabel`/`onPress` → RN `accessibilityLabel`/`onPress`.
-//   - CSS grid (repeat(4, 4rem) + space-between) → a wrapping flex row.
-
-// 1. React / RN imports
-import { View } from 'react-native';
-
-// 2. Internal imports (relative)
-import { Typography } from '../../../../../../core/design/components/Typography';
-import { useString } from '../../../../../../core/localization';
-import { AddTile } from '../../../../../features/shared/components/AddTile';
-import { SelectedMember } from '../../../../../features/shared/components/SelectedMember';
-import { YouTile } from '../../../../../features/shared/components/YouTile';
-import { useStyles } from './styles';
-
-// 3. Types
-type MemberGridProps = {
-  currentUser: Amity.User | null | undefined;
-  members: Amity.User[];
-  onAddMember: () => void;
-  onRemoveMember: (userId: string) => void;
-};
-
-// 4. Named function component
-export function MemberGrid({
-  currentUser,
-  members,
-  onAddMember,
-  onRemoveMember,
-}: MemberGridProps) {
-  const { styles } = useStyles();
-  const memberLabel = useString('amity_chat_group_members');
-  const addMemberLabel = useString('amity_chat_add_member_chip');
-
-  return (
-    <View style={styles.memberGrid}>
-      <Typography variant="titleBold" style={styles.heading}>
-        {memberLabel}
-      </Typography>
-      <View style={styles.list}>
-        <AddTile
-          onPress={onAddMember}
-          accessibilityLabel={addMemberLabel}
-          label={addMemberLabel}
-        />
-        {currentUser && <YouTile user={currentUser} />}
-        {members.map((user) => (
-          <SelectedMember
-            key={user.userId}
-            user={user}
-            onRemove={onRemoveMember}
-          />
-        ))}
-      </View>
-    </View>
-  );
-}

package/src/chat/features/group/create/components/MemberGrid/index.ts

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

package/src/chat/features/group/create/components/MemberGrid/styles.ts

@@ -1,34 +0,0 @@
-// Styles for MemberGrid — ported from AmityUiKitWeb
-// v4/chat/features/group/create/components/MemberGrid/MemberGrid.module.css.
-// Geometry: horizontal padding 1rem→16; heading padding 1.5rem 0 0.25rem→24/0/4;
-// list vertical padding 1rem→16, row gap 1rem→16. Web's 4-column CSS grid with
-// space-between → a wrapping flex row with space-between. Colours via tokens.
-
-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({
-    memberGrid: {
-      flexDirection: 'column',
-      paddingHorizontal: 16,
-    },
-    heading: {
-      paddingTop: 24,
-      paddingBottom: 4,
-      color: token(AmityColorToken.TextInputUserInputTitleDefault),
-    },
-    list: {
-      flexDirection: 'row',
-      flexWrap: 'wrap',
-      justifyContent: 'space-between',
-      rowGap: 16,
-      paddingVertical: 16,
-    },
-  });
-
-  return { styles, token };
-};

package/src/chat/features/group/create/components/PrivacySection/PrivacySection.tsx

@@ -1,117 +0,0 @@
-// PrivacySection — the public/private chooser on the create-group screen. Ported
-// from AmityUiKitWeb v4/chat/features/group/create/components/PrivacySection. Two
-// radio rows (each an icon circle + title + description) and a warning banner.
-//
-// RN adaptations from web:
-//   - Web's `Selection.RadioGroup` (react-aria) has no RN wrapper; each option is
-//     an individual `Selection.Radio` (isSelected/onSelect) with group state owned
-//     here. `EarthAfrica.Solid`→`earth-africa-s`; `LockKeyhole`→`lock-keyhole-r`.
-
-// 1. React / RN imports
-import { type ReactNode } from 'react';
-import { View } from 'react-native';
-
-// 2. Internal imports (relative)
-import { Selection } from '../../../../../../core/design/atoms/Selection';
-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. Types
-type PrivacySectionProps = {
-  isPublic: boolean;
-  onChange: (isPublic: boolean) => void;
-};
-
-// 4. Named function component
-export function PrivacySection({ isPublic, onChange }: PrivacySectionProps) {
-  const { styles } = useStyles();
-  const privacyLabel = useString('amity_chat_privacy_label');
-  const publicTitle = useString('amity_chat_create_group_public_title');
-  const publicDesc = useString('amity_chat_create_group_public_subtitle');
-  const privateTitle = useString('amity_chat_create_group_private_title');
-  const privateDesc = useString('amity_chat_create_group_private_subtitle');
-  const privacyWarning = useString('amity_chat_privacy_warning');
-
-  return (
-    <View style={styles.privacySection}>
-      <Typography variant="titleBold" style={styles.heading}>
-        {privacyLabel}
-      </Typography>
-      <View style={styles.options}>
-        <View style={styles.optionRow}>
-          <Selection.Radio
-            isSelected={isPublic}
-            onSelect={() => onChange(true)}
-            accessibilityLabel={publicTitle}
-          >
-            <PrivacyRow
-              icon={
-                <AmityIcon
-                  name="earth-africa-s"
-                  size={24}
-                  tokenColor={AmityColorToken.IconFeaturedIconTinted}
-                />
-              }
-              title={publicTitle}
-              description={publicDesc}
-            />
-          </Selection.Radio>
-        </View>
-        <View style={styles.optionRow}>
-          <Selection.Radio
-            isSelected={!isPublic}
-            onSelect={() => onChange(false)}
-            accessibilityLabel={privateTitle}
-          >
-            <PrivacyRow
-              icon={
-                <AmityIcon
-                  name="lock-keyhole-r"
-                  size={24}
-                  tokenColor={AmityColorToken.IconFeaturedIconTinted}
-                />
-              }
-              title={privateTitle}
-              description={privateDesc}
-            />
-          </Selection.Radio>
-        </View>
-      </View>
-      <View style={styles.banner}>
-        <Typography variant="caption" style={styles.bannerText}>
-          {privacyWarning}
-        </Typography>
-      </View>
-    </View>
-  );
-}
-
-// 5. Sub-component — an icon circle beside a title + description.
-type PrivacyRowProps = {
-  icon: ReactNode;
-  title: string;
-  description: string;
-};
-
-function PrivacyRow({ icon, title, description }: PrivacyRowProps) {
-  const { styles } = useStyles();
-  return (
-    <View style={styles.row}>
-      <View style={styles.iconCircle}>{icon}</View>
-      <View style={styles.text}>
-        <Typography variant="bodyBold" style={styles.title}>
-          {title}
-        </Typography>
-        <Typography variant="caption" style={styles.description}>
-          {description}
-        </Typography>
-      </View>
-    </View>
-  );
-}
-
-// 6. Compound variant — mirrors web's `PrivacySection.Row`.
-PrivacySection.Row = PrivacyRow;

package/src/chat/features/group/create/components/PrivacySection/index.ts

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

package/src/chat/features/group/create/components/PrivacySection/styles.ts

@@ -1,66 +0,0 @@
-// Styles for PrivacySection — ported from AmityUiKitWeb
-// v4/chat/features/group/create/components/PrivacySection/PrivacySection.module.css.
-// Geometry: heading padding 1.5rem 1rem 0.25rem→24/16/4; row gap 0.5rem→8;
-// icon circle 2.5rem→40; text gap 0.125rem→2; banner padding 0.75rem 1rem→12/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({
-    privacySection: {
-      flexDirection: 'column',
-    },
-    heading: {
-      paddingTop: 24,
-      paddingHorizontal: 16,
-      paddingBottom: 4,
-      color: token(AmityColorToken.TextListHeaderDefaultDefault),
-    },
-    options: {
-      flexDirection: 'column',
-    },
-    optionRow: {
-      backgroundColor: token(AmityColorToken.SurfaceListDefaultDefault),
-    },
-    row: {
-      flex: 1,
-      flexDirection: 'row',
-      alignItems: 'flex-start',
-      gap: 8,
-    },
-    iconCircle: {
-      alignItems: 'center',
-      justifyContent: 'center',
-      width: 40,
-      height: 40,
-      borderRadius: 20,
-      backgroundColor: token(AmityColorToken.SurfaceFeaturedIconTinted),
-    },
-    text: {
-      flex: 1,
-      flexDirection: 'column',
-      gap: 2,
-    },
-    title: {
-      color: token(AmityColorToken.TextListHeaderDefaultDefault),
-    },
-    description: {
-      color: token(AmityColorToken.TextListTextDescriptionDefaultDefault),
-    },
-    banner: {
-      paddingVertical: 12,
-      paddingHorizontal: 16,
-      backgroundColor: token(AmityColorToken.SurfaceListDefaultHover),
-    },
-    bannerText: {
-      color: token(AmityColorToken.TextListTextDescriptionDefaultDefault),
-    },
-  });
-
-  return { styles, token };
-};

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

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

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

@@ -1,5 +0,0 @@
-export { useCreateGroupChat } from './useCreateGroupChat';
-export type {
-  CreateGroupChatPageProps,
-  CreateGroupChatForm,
-} from './useCreateGroupChat';