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

package/src/chat/elements/ReactionPicker/ReactionPicker.tsx

@@ -1,97 +0,0 @@
-// ReactionPicker — RN port of AmityUiKitWeb v4/chat/elements/ReactionPicker.
-// The horizontal reactions row shown in the message action popover. Tapping a
-// reaction fires onReactionClick (+ onSelectReaction), matching web. The active
-// reaction shows the reactionstate-active circle; the reaction name floats above
-// on press (web shows it on hover — RN has no hover, so it surfaces on press-in).
-//
-// RN adaptations from web:
-//   - Web reads the reaction set from CustomReactionProvider; RN has no runtime
-//     accessor for the top-level `message_reactions` config, so it defaults to
-//     DEFAULT_MESSAGE_REACTIONS (overridable via the `reactions` prop).
-//   - Web renders reaction.image URLs; RN renders the ported ReactionGlyph art.
-//   - Web hover/touch-hover drag + above/below label flip are web-only
-//     interactions and are omitted.
-
-// 1. React / RN imports
-import { Pressable, View } from 'react-native';
-
-// 2. Internal imports
-import { Typography } from '../../../core/design/components/Typography';
-import { resolveString } from '../../../core/localization';
-import {
-  DEFAULT_MESSAGE_REACTIONS,
-  ReactionGlyph,
-} from '../../features/shared/utils/reactionIcons';
-import { useStyles } from './styles';
-
-// 3. Types
-export type ReactionPickerProps = {
-  /** Reaction names to show. Defaults to the standard message reaction set. */
-  reactions?: readonly string[];
-  myReaction?: string | null;
-  onReactionClick: (reactionName: string) => void;
-  onSelectReaction?: (reactionName: string) => void;
-  pageId?: string;
-  componentId?: string;
-};
-
-// Web CustomReactionProvider.getChatReactionLabel.
-function getChatReactionLabel(reactionName: string): string {
-  const name = reactionName.toLowerCase();
-  const key = `amity_chat_reaction_label_${name}`;
-  const localized = resolveString(key);
-  return localized === key ? reactionName : localized;
-}
-
-// 4. Named function component
-export function ReactionPicker({
-  reactions = DEFAULT_MESSAGE_REACTIONS,
-  myReaction,
-  onReactionClick,
-  onSelectReaction,
-}: ReactionPickerProps) {
-  const { styles } = useStyles();
-
-  if (!reactions || reactions.length === 0) return null;
-
-  const onClickReaction = (reactionName: string) => {
-    onReactionClick(reactionName);
-    onSelectReaction?.(reactionName);
-  };
-
-  return (
-    <View style={styles.pill}>
-      <View style={styles.row}>
-        {reactions.map((name) => {
-          const active = myReaction === name;
-          return (
-            <Pressable
-              key={name}
-              onPress={() => onClickReaction(name)}
-              accessibilityRole="button"
-              accessibilityLabel="Reaction picker"
-            >
-              {({ pressed }) => (
-                <View style={styles.reactionButton}>
-                  {pressed ? (
-                    <View style={styles.label}>
-                      <Typography variant="caption" style={styles.labelText}>
-                        {getChatReactionLabel(name)}
-                      </Typography>
-                    </View>
-                  ) : null}
-                  {/* PDT-4143 (web PR 1822) narrowed this to the active state
-                      only — it used to light up on hover / touch-hover too, which
-                      made a reaction look already-selected while being pressed.
-                      The floating label above still follows the press. */}
-                  {active ? <View style={styles.activeBackground} /> : null}
-                  <ReactionGlyph name={name} size={32} />
-                </View>
-              )}
-            </Pressable>
-          );
-        })}
-      </View>
-    </View>
-  );
-}

package/src/chat/elements/ReactionPicker/index.ts

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

package/src/chat/elements/ReactionPicker/styles.ts

@@ -1,90 +0,0 @@
-// Styles for ReactionPicker — ported from AmityUiKitWeb
-// v4/chat/elements/ReactionPicker/ReactionPicker.module.css PLUS the pill
-// wrapper web keeps in MessageActionsPopover.module.css
-// (`.messageActionsPopover__reactionPicker`: filled-default surface, full radius,
-// box-shadow-04). The wrapper is folded in here so the component is a drop-in
-// for the RN action menu — mounting it closes web's reactionpopover-filled-default
-// gap. Orchestrator MUST NOT double-wrap it in another pill.
-// rem→px ×16.
-
-import { StyleSheet } from 'react-native';
-import { useToken } from '../../../core/design/theme/useToken';
-import { useAmityTheme } from '../../../core/design/theme/AmityThemeProvider';
-import { AmityColorToken } from '../../../core/design/tokens/amity-color-tokens';
-
-export const useStyles = () => {
-  const token = useToken();
-  const { mode } = useAmityTheme();
-
-  const styles = StyleSheet.create({
-    // .messageActionsPopover__reactionPicker (the filled pill)
-    pill: {
-      alignSelf: 'flex-start',
-      flexDirection: 'row',
-      alignItems: 'center',
-      padding: 8,
-      borderRadius: 9999,
-      backgroundColor: token(
-        AmityColorToken.SurfaceReactionsReactionPopoverFilledDefault
-      ),
-      // PDT-3934: match web reaction-bar elevation-08 (3 stacked layers:
-      // 0 4px 24px 4px / 0 32px 64px -12px / 0 6px 6px -4px). RN can't stack
-      // shadows, so approximate with a single heavier, softer shadow; colour is
-      // theme-aware (light rgba(41,43,50), dark rgba(0,0,0)) per the token defs.
-      shadowColor: mode === 'dark' ? 'rgb(0, 0, 0)' : 'rgb(41, 43, 50)',
-      shadowOffset: { width: 0, height: 8 },
-      shadowOpacity: 0.18,
-      shadowRadius: 24,
-      elevation: 12,
-    },
-    // .reactionPickerContainer
-    row: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      gap: 8,
-    },
-    // .reactionButton (2rem × 2rem)
-    reactionButton: {
-      position: 'relative',
-      alignItems: 'center',
-      justifyContent: 'center',
-      width: 32,
-      height: 32,
-    },
-    // .reactionButton__activeBackground
-    activeBackground: {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      width: 32,
-      height: 32,
-      borderRadius: 9999,
-      backgroundColor: token(
-        AmityColorToken.SurfaceReactionsReactionPopoverReactionStateActive
-      ),
-    },
-    // .reactionButton__text (floating label tooltip)
-    label: {
-      position: 'absolute',
-      top: -33,
-      alignSelf: 'center',
-      maxWidth: 64,
-      paddingVertical: 2,
-      paddingHorizontal: 6,
-      borderRadius: 28,
-      backgroundColor: token(
-        AmityColorToken.SurfaceReactionsReactionPopoverReactionNameActive
-      ),
-      zIndex: 2,
-    },
-    labelText: {
-      textTransform: 'capitalize',
-      textAlign: 'center',
-      color: token(
-        AmityColorToken.TextReactionsReactionPopoverReactionNameGeneral
-      ),
-    },
-  });
-
-  return { styles };
-};

package/src/chat/elements/SettingMenu/SettingMenu.tsx

@@ -1,83 +0,0 @@
-// SettingMenu element — ported from AmityUiKitWeb chat/elements/SettingMenu.
-// A single tappable settings row: leading icon-badge + label on the left, an
-// optional trailing text + chevron on the right. A `destructive` row instead
-// renders just a bold destructive-coloured label (e.g. "Leave group").
-//
-// RN adaptation from web: web's `icon?: React.ElementType` cannot cross the RN
-// icon system (SoT SVGs rendered by name), so it becomes `iconName?: AmityIconName`.
-
-// 1. React / RN imports
-import { Pressable, View } from 'react-native';
-
-// 2. Internal imports (relative)
-import { Typography } from '../../../core/design/components/Typography';
-import { AmityIcon, type AmityIconName } from '../../../core/design/icons';
-import { AmityColorToken } from '../../../core/design/tokens/amity-color-tokens';
-import { useStyles } from './styles';
-
-// 3. Types
-export type SettingMenuProps = {
-  /** SoT icon name for the leading icon-badge (web `icon: React.ElementType`). */
-  iconName?: AmityIconName;
-  label: string;
-  trailingText?: string;
-  destructive?: boolean;
-  accessibilityLabel?: string;
-  onPress: () => void;
-};
-
-// 4. Named function component
-export function SettingMenu({
-  iconName,
-  label,
-  trailingText,
-  destructive = false,
-  accessibilityLabel,
-  onPress,
-}: SettingMenuProps) {
-  const { styles } = useStyles();
-
-  return (
-    <Pressable
-      style={styles.row}
-      onPress={onPress}
-      accessibilityRole="button"
-      accessibilityLabel={accessibilityLabel ?? label}
-    >
-      {destructive ? (
-        <Typography variant="bodyBold" style={styles.destructiveLabel}>
-          {label}
-        </Typography>
-      ) : (
-        <>
-          <View style={styles.leading}>
-            {iconName ? (
-              <View style={styles.iconBadge}>
-                <AmityIcon
-                  name={iconName}
-                  size={24}
-                  tokenColor={AmityColorToken.IconFeaturedIconTinted}
-                />
-              </View>
-            ) : null}
-            <Typography variant="body" style={styles.label} numberOfLines={1}>
-              {label}
-            </Typography>
-          </View>
-          <View style={styles.trailing}>
-            {trailingText ? (
-              <Typography variant="body" style={styles.trailingText}>
-                {trailingText}
-              </Typography>
-            ) : null}
-            <AmityIcon
-              name="chevron-right"
-              size={24}
-              tokenColor={AmityColorToken.IconListLeadingDefaultDefault}
-            />
-          </View>
-        </>
-      )}
-    </Pressable>
-  );
-}

package/src/chat/elements/SettingMenu/index.ts

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

package/src/chat/elements/SettingMenu/styles.ts

@@ -1,57 +0,0 @@
-import { StyleSheet } from 'react-native';
-import { useToken } from '../../../core/design/theme/useToken';
-import { AmityColorToken } from '../../../core/design/tokens/amity-color-tokens';
-
-// Geometry ported from AmityUiKitWeb SettingMenu.module.css (rem -> px, x16):
-// row padding 1rem=16, gap 0.5rem=8; leading gap 0.75rem=12; icon badge 2rem=32
-// (padding 0.25rem=4, radius 0.5rem=8); icon 1.5rem=24; chevron 1.5rem=24;
-// trailing gap 0.5rem=8.
-export const useStyles = () => {
-  const token = useToken();
-
-  const styles = StyleSheet.create({
-    row: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      gap: 8,
-      width: '100%',
-      padding: 16,
-      backgroundColor: token(AmityColorToken.SurfaceListDefaultDefault),
-    },
-    leading: {
-      flex: 1,
-      minWidth: 0,
-      flexDirection: 'row',
-      alignItems: 'center',
-      gap: 12,
-      overflow: 'hidden',
-    },
-    iconBadge: {
-      alignItems: 'center',
-      justifyContent: 'center',
-      width: 32,
-      height: 32,
-      padding: 4,
-      borderRadius: 8,
-      backgroundColor: token(AmityColorToken.SurfaceFeaturedIconTinted),
-    },
-    label: {
-      flexShrink: 1,
-      color: token(AmityColorToken.TextListHeaderDefaultDefault),
-    },
-    destructiveLabel: {
-      color: token(AmityColorToken.TextListHeaderDestructiveDefault),
-    },
-    trailing: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      gap: 8,
-    },
-    trailingText: {
-      color: token(AmityColorToken.TextListTrailingTextGeneral),
-    },
-  });
-
-  return { styles, token };
-};

package/src/chat/elements/TopBar/TopBar.tsx

@@ -1,61 +0,0 @@
-// TopBar — ported from AmityUiKitWeb v4/chat/elements/TopBar.
-// A generic top bar: a leading icon button (back chevron or close cross), a
-// centered bold title, and an optional trailing slot.
-//
-// RN adaptations from web:
-//   - Web `Button.Icon` (ghost/secondary) → a Pressable + AmityIcon tinted with
-//     the Icon/IconButton/Ghost/Secondary token (matches the conversation Header).
-//   - `<header>`/`<div>` → View. `position: sticky` has no RN equivalent and is
-//     dropped — the hosting page lays the bar out at the top.
-
-// 1. React / RN imports
-import { type ReactNode } from 'react';
-import { Pressable, 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 { useStyles } from './styles';
-
-// 3. Types
-type TopBarProps = {
-  title: string;
-  leadingType?: 'back' | 'close';
-  onLeading: () => void;
-  trailing?: ReactNode;
-};
-
-// 4. Named function component
-export function TopBar({
-  title,
-  leadingType = 'back',
-  onLeading,
-  trailing,
-}: TopBarProps) {
-  const { styles } = useStyles();
-  const isBack = leadingType === 'back';
-
-  return (
-    <View style={styles.topBar}>
-      <View style={styles.leftAction}>
-        <Pressable
-          style={styles.iconButton}
-          onPress={onLeading}
-          accessibilityRole="button"
-          accessibilityLabel={isBack ? 'Back' : 'Close'}
-        >
-          <AmityIcon
-            name={isBack ? 'chevron-left' : 'cross-r'}
-            size={24}
-            tokenColor={AmityColorToken.IconIconButtonGhostSecondaryDefault}
-          />
-        </Pressable>
-      </View>
-      <Typography variant="titleBold" style={styles.title} numberOfLines={1}>
-        {title}
-      </Typography>
-      <View style={styles.rightAction}>{trailing}</View>
-    </View>
-  );
-}

package/src/chat/elements/TopBar/index.ts

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

package/src/chat/elements/TopBar/styles.ts

@@ -1,50 +0,0 @@
-// Styles for TopBar — ported from AmityUiKitWeb v4/chat/elements/TopBar.module.css.
-// Geometry: gap 0.5rem→8, padding 0.75rem 1rem→12/16, height 3.5rem→56,
-// title max-width 16rem→256. 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({
-    topBar: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      gap: 8,
-      paddingVertical: 12,
-      paddingHorizontal: 16,
-      height: 56,
-      backgroundColor: token(AmityColorToken.SurfacePageBackgroundDefault),
-    },
-    leftAction: {
-      flex: 1,
-      flexDirection: 'row',
-      alignItems: 'center',
-      minWidth: 0,
-    },
-    rightAction: {
-      flex: 1,
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'flex-end',
-      minWidth: 0,
-    },
-    title: {
-      flexShrink: 0,
-      maxWidth: 256,
-      textAlign: 'center',
-      color: token(AmityColorToken.TextSheetsHeaderTitleDefault),
-    },
-    iconButton: {
-      width: 32,
-      height: 32,
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-  });
-
-  return { styles, token };
-};

package/src/chat/elements/WaitingForNetwork/WaitingForNetwork.tsx

@@ -1,48 +0,0 @@
-// WaitingForNetwork — ported from AmityUiKitWeb v4/chat/elements/WaitingForNetwork.
-// An offline indicator: a small spinner + label, shown only while the device is
-// offline.
-//
-// RN adaptations from web:
-//   - Web reads `react-use`'s `useNetworkState().online`; RN subscribes to
-//     `@react-native-community/netinfo` (already a repo dependency).
-//   - `state.isConnected` is `null` until the first callback, so we render only
-//     when it is explicitly `false` (mirrors web's `online !== false` guard,
-//     avoiding a flash on mount).
-
-// 1. React / RN imports
-import { useEffect, useState } from 'react';
-import { View } from 'react-native';
-
-// 2. Third-party imports
-import NetInfo from '@react-native-community/netinfo';
-
-// 3. Internal imports (relative)
-import { Typography } from '../../../core/design/components/Typography';
-import { Loader } from '../../../core/design/atoms/Loader';
-import { useString } from '../../../core/localization';
-import { useStyles } from './styles';
-
-// 4. Named function component
-export function WaitingForNetwork() {
-  const { styles } = useStyles();
-  const [isOffline, setIsOffline] = useState(false);
-  const label = useString('amity_chat_waiting_for_network');
-
-  useEffect(() => {
-    const unsubscribe = NetInfo.addEventListener((state) => {
-      setIsOffline(state.isConnected === false);
-    });
-    return () => unsubscribe();
-  }, []);
-
-  if (!isOffline) return null;
-
-  return (
-    <View style={styles.waitingForNetwork}>
-      <Loader.Spinner size="sm" />
-      <Typography variant="caption" style={styles.text} numberOfLines={1}>
-        {label}
-      </Typography>
-    </View>
-  );
-}

package/src/chat/elements/WaitingForNetwork/index.ts

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

package/src/chat/elements/WaitingForNetwork/styles.ts

@@ -1,30 +0,0 @@
-// Styles for WaitingForNetwork — ported from AmityUiKitWeb
-// v4/chat/elements/WaitingForNetwork.module.css. Geometry: gap 0.25rem→4.
-// 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({
-    waitingForNetwork: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      gap: 4,
-      // Web pins this to flex-shrink: 0 — safe on a desktop header, but on a phone
-      // the chat-list header has barely enough room and the label overflowed on top
-      // of the action buttons. Allow it to shrink; the label ellipsizes instead.
-      flexShrink: 1,
-      minWidth: 0,
-    },
-    text: {
-      flexShrink: 1,
-      color: token(AmityColorToken.TextListTextDescriptionDefaultDefault),
-    },
-  });
-
-  return { styles, token };
-};

package/src/chat/features/archive/ArchivedChat.tsx

@@ -1,28 +0,0 @@
-// ArchivedChat — ported from AmityUiKitWeb v4/chat/features/archive/ArchivedChat.
-// The archived-chats feature root: a back-navigating Header over the
-// ArchivedChannelList.
-//
-// RN adaptations from web:
-//   - Web `useChatNavigation().pop` → the RN `useChatNavigation` adapter (goBack).
-//   - `<div>` → View; `min-height: 100svh` → flex:1 (no svh in RN).
-
-// 1. React / RN imports
-import { View } from 'react-native';
-
-// 2. Internal imports (relative)
-import { useChatNavigation } from '../../hooks/useChatNavigation';
-import { Header, ArchivedChannelList } from './components';
-import { useStyles } from './styles';
-
-// 3. Named function component
-export function ArchivedChat() {
-  const { styles } = useStyles();
-  const { pop } = useChatNavigation();
-
-  return (
-    <View style={styles.archivedChat}>
-      <Header onBack={pop} />
-      <ArchivedChannelList />
-    </View>
-  );
-}