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

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

@@ -1,44 +0,0 @@
-// FailedToShow — ported from AmityUiKitWeb features/shared/components/FailedToShow.
-// A centered icon + title + description shown when content can't be displayed.
-// Web `className` (CSS-module override) → RN `style` prop, applied after the base
-// container style. `flex: 1 1 auto` → flex:1 fill + center.
-
-// 1. React / RN imports
-import { View, type StyleProp, type ViewStyle } from 'react-native';
-
-// 2. Internal imports
-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 FailedToShowProps = {
-  style?: StyleProp<ViewStyle>;
-};
-
-// 4. Named function component
-export function FailedToShow({ style }: FailedToShowProps) {
-  const { styles } = useStyles();
-  const title = useString('amity_social_label_livestream_deleted_page_title');
-  const description = useString(
-    'amity_social_button_livestream_unavailable_desc'
-  );
-
-  return (
-    <View style={[styles.failedToShow, style]}>
-      <AmityIcon
-        name="newspaper-question-l"
-        size={64}
-        tokenColor={AmityColorToken.IconEmptyStateIconDefault}
-      />
-      <Typography variant="titleBold" style={styles.title}>
-        {title}
-      </Typography>
-      <Typography variant="body" style={styles.desc}>
-        {description}
-      </Typography>
-    </View>
-  );
-}

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

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

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

@@ -1,32 +0,0 @@
-// Styles for FailedToShow — ported from FailedToShow.module.css.
-// Geometry: gap 0.5rem→8, padding 1.5rem→24, icon 4rem→64. `flex: 1 1 auto`
-// fill → flex:1 + center. 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({
-    failedToShow: {
-      flex: 1,
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'center',
-      gap: 8,
-      padding: 24,
-    },
-    title: {
-      textAlign: 'center',
-      color: token(AmityColorToken.TextEmptyStateTitleDefault),
-    },
-    desc: {
-      textAlign: 'center',
-      color: token(AmityColorToken.TextEmptyStateDescriptionDefault),
-    },
-  });
-
-  return { styles, token };
-};

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

@@ -1,130 +0,0 @@
-// ImageViewer — ported from AmityUiKitWeb chat/features/shared/components/ImageViewer.
-// Web wrapped MediaViewer around an <img>; RN uses react-native-image-viewing, which
-// provides its own pan/zoom full-screen viewer. We layer the same chrome via its
-// HeaderComponent (close) and FooterComponent (delete/save) props so the surface
-// matches VideoPlayer/MediaViewer.
-
-// 1. React / RN imports
-import { Pressable, View } from 'react-native';
-
-// 2. Third-party imports
-import ImageView from 'react-native-image-viewing';
-
-// 3. Internal imports
-import { AmityIcon } from '../../../../../core/design/icons';
-import { AmityColorToken } from '../../../../../core/design/tokens/amity-color-tokens';
-import { useString } from '../../../../../core/localization';
-import Toast from '../../../../../social/components/Toast';
-import { useStyles } from './styles';
-
-// 4. Types
-type ImageViewerProps = {
-  src: string;
-  onClose: () => void;
-  isOwn?: boolean;
-  onDelete?: () => void;
-  onSave?: () => void;
-};
-
-// 5. Named function component
-export function ImageViewer({
-  src,
-  onClose,
-  isOwn = false,
-  onDelete,
-  onSave,
-}: ImageViewerProps) {
-  const { styles } = useStyles();
-  const deleteLabel = useString('amity_chat_option_delete');
-  const saveLabel = useString('amity_chat_action_save');
-
-  const canDelete = isOwn && !!onDelete;
-  const canSave = !!onSave;
-
-  return (
-    <ImageView
-      images={[{ uri: src }]}
-      imageIndex={0}
-      visible
-      onRequestClose={onClose}
-      // Web MediaViewer overlay is solid black (.mediaViewer__overlay background);
-      // rgb() (no hex) keeps the repo's no-hex gate happy.
-      backgroundColor="rgb(0, 0, 0)"
-      HeaderComponent={() => (
-        <View style={styles.topBar}>
-          <Pressable
-            style={styles.closeButton}
-            onPress={onClose}
-            accessibilityRole="button"
-            accessibilityLabel="Close"
-          >
-            <AmityIcon
-              name="cross-r"
-              size={24}
-              tokenColor={
-                AmityColorToken.IconIconButtonTransparentPrimaryDefault
-              }
-            />
-          </Pressable>
-        </View>
-      )}
-      // Always rendered: besides the action bar it hosts the chat toast. Save
-      // success/failure toasts fire while this Modal is open, and the global
-      // <Toast /> is mounted outside it (RN renders it beneath the native Modal
-      // layer), so a second instance lives here — it reads the same redux toast
-      // state, so only one pill is ever visible. It sits in the library's footer
-      // container, which slides away with the bars on tap-to-toggle; that is
-      // intended (bars hidden = "show me the image unobstructed"). Not a sibling
-      // <Modal>: stacked RN modals are unreliable on iOS.
-      FooterComponent={() => (
-        <>
-          <View pointerEvents="box-none" style={styles.toastLayer}>
-            <Toast />
-          </View>
-
-          {canDelete || canSave ? (
-            <View style={styles.bottomBar}>
-              {canDelete ? (
-                <Pressable
-                  style={styles.bottomIconButton}
-                  onPress={onDelete}
-                  accessibilityRole="button"
-                  accessibilityLabel={deleteLabel}
-                >
-                  <AmityIcon
-                    name="trash-r"
-                    size={24}
-                    tokenColor={
-                      AmityColorToken.IconIconButtonTransparentPrimaryDefault
-                    }
-                  />
-                </Pressable>
-              ) : (
-                <View />
-              )}
-
-              {canSave ? (
-                <Pressable
-                  style={styles.bottomIconButton}
-                  onPress={onSave}
-                  accessibilityRole="button"
-                  accessibilityLabel={saveLabel}
-                >
-                  <AmityIcon
-                    name="arrow-down-to-bracket-r"
-                    size={24}
-                    tokenColor={
-                      AmityColorToken.IconIconButtonTransparentPrimaryDefault
-                    }
-                  />
-                </Pressable>
-              ) : (
-                <View />
-              )}
-            </View>
-          ) : null}
-        </>
-      )}
-    />
-  );
-}

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

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

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

@@ -1,69 +0,0 @@
-// Styles for ImageViewer — the header/footer chrome layered over
-// react-native-image-viewing. Mirrors MediaViewer's bars (padding 1rem→16, buttons
-// 32/40, radius 9999). SafeArea top/bottom padding keeps the bars clear of the notch
-// and home indicator since the viewer renders edge-to-edge.
-
-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',
-      justifyContent: 'flex-start',
-      paddingHorizontal: 16,
-      paddingTop: 44,
-      paddingBottom: 16,
-      // Web MediaViewer bars: rgb(0 0 0 / 50%) (.mediaViewer__topBar/__bottomBar).
-      backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    },
-    bottomBar: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      paddingHorizontal: 16,
-      paddingTop: 16,
-      paddingBottom: 32,
-      // Web MediaViewer bars: rgb(0 0 0 / 50%) (.mediaViewer__topBar/__bottomBar).
-      backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    },
-    // Host for the chat toast mounted inside react-native-image-viewing's Modal
-    // (the global <Toast /> is outside it and renders beneath the native Modal
-    // layer). Anchored above the bottom bar (40 icon + 16 top + 32 bottom = 88).
-    toastLayer: {
-      position: 'absolute',
-      left: 0,
-      right: 0,
-      bottom: 88,
-      zIndex: 4,
-    },
-    closeButton: {
-      width: 32,
-      height: 32,
-      alignItems: 'center',
-      justifyContent: 'center',
-      padding: 4,
-      borderRadius: 9999,
-      backgroundColor: token(
-        AmityColorToken.SurfaceIconButtonTransparentPrimaryEnabled
-      ),
-    },
-    bottomIconButton: {
-      width: 40,
-      height: 40,
-      alignItems: 'center',
-      justifyContent: 'center',
-      padding: 8,
-      borderRadius: 9999,
-      backgroundColor: token(
-        AmityColorToken.SurfaceIconButtonTransparentPrimaryEnabled
-      ),
-    },
-  });
-
-  return { styles, token };
-};

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

@@ -1,130 +0,0 @@
-// MediaViewer — ported from AmityUiKitWeb chat/features/shared/components/MediaViewer.
-// Full-screen media shell: a dark backdrop, a top bar with a close button, a centered
-// stage for arbitrary media (children), and a bottom bar with optional delete (own
-// message only) + save actions. Web used react-aria ModalOverlay/Modal/Dialog; RN uses
-// the native Modal. Used by VideoPlayer; images use react-native-image-viewing instead.
-
-// 1. React / RN imports
-import type { ReactNode } from 'react';
-import { Modal, Pressable, View } from 'react-native';
-
-// 2. Internal imports
-import { AmityIcon } from '../../../../../core/design/icons';
-import { AmityColorToken } from '../../../../../core/design/tokens/amity-color-tokens';
-import { useString } from '../../../../../core/localization';
-import Toast from '../../../../../social/components/Toast';
-import { useStyles } from './styles';
-
-// 3. Types
-type MediaViewerProps = {
-  accessibilityLabel: string;
-  onClose: () => void;
-  children: ReactNode;
-  isOwn?: boolean;
-  onDelete?: () => void;
-  deleteAccessibilityLabel?: string;
-  onSave?: () => void;
-  saveAccessibilityLabel?: string;
-};
-
-// 4. Named function component
-export function MediaViewer({
-  accessibilityLabel,
-  onClose,
-  children,
-  isOwn = false,
-  onDelete,
-  deleteAccessibilityLabel,
-  onSave,
-  saveAccessibilityLabel,
-}: MediaViewerProps) {
-  const { styles } = useStyles();
-  const deleteLabel = useString('amity_chat_option_delete');
-  const saveLabel = useString('amity_chat_action_save');
-
-  const canDelete = isOwn && !!onDelete;
-  const canSave = !!onSave;
-
-  return (
-    <Modal
-      visible
-      transparent={false}
-      animationType="fade"
-      onRequestClose={onClose}
-      statusBarTranslucent
-    >
-      <View
-        style={styles.overlay}
-        accessibilityLabel={accessibilityLabel}
-        accessibilityViewIsModal
-      >
-        <View style={styles.stage}>{children}</View>
-
-        <View style={styles.topBar}>
-          <Pressable
-            style={styles.closeButton}
-            onPress={onClose}
-            accessibilityRole="button"
-            accessibilityLabel="Close"
-          >
-            <AmityIcon
-              name="cross-r"
-              size={24}
-              tokenColor={
-                AmityColorToken.IconIconButtonTransparentPrimaryDefault
-              }
-            />
-          </Pressable>
-        </View>
-
-        <View style={styles.bottomBar}>
-          {canDelete ? (
-            <Pressable
-              style={styles.bottomIconButton}
-              onPress={onDelete}
-              accessibilityRole="button"
-              accessibilityLabel={deleteAccessibilityLabel ?? deleteLabel}
-            >
-              <AmityIcon
-                name="trash-r"
-                size={24}
-                tokenColor={
-                  AmityColorToken.IconIconButtonTransparentPrimaryDefault
-                }
-              />
-            </Pressable>
-          ) : (
-            <View />
-          )}
-
-          {canSave ? (
-            <Pressable
-              style={styles.bottomIconButton}
-              onPress={onSave}
-              accessibilityRole="button"
-              accessibilityLabel={saveAccessibilityLabel ?? saveLabel}
-            >
-              <AmityIcon
-                name="arrow-down-to-bracket-r"
-                size={24}
-                tokenColor={
-                  AmityColorToken.IconIconButtonTransparentPrimaryDefault
-                }
-              />
-            </Pressable>
-          ) : (
-            <View />
-          )}
-        </View>
-
-        {/* Save success/failure toasts fire while this Modal is open. The global
-            <Toast /> is mounted outside it, so RN would render it beneath the
-            native Modal layer; mount one inside too — it reads the same redux
-            toast state, so only one pill is ever visible. */}
-        <View pointerEvents="box-none" style={styles.toastLayer}>
-          <Toast />
-        </View>
-      </View>
-    </Modal>
-  );
-}

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

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

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

@@ -1,93 +0,0 @@
-// Styles for MediaViewer — ported from AmityUiKitWeb MediaViewer.module.css.
-// Geometry: bars padding 1rem→16; close button 2rem→32; bottom icon button 2.5rem→40;
-// icons 1.5rem→24; radius 9999→9999. Backdrop and bars follow web's literals rather
-// than tokens (web hardcodes them too, and the token set ships no opaque black):
-// overlay rgb(0,0,0), bars rgba(0,0,0,0.5). rgb()/rgba() not hex, per the no-hex gate.
-
-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({
-    overlay: {
-      flex: 1,
-      // Web .mediaViewer__overlay is solid black, so no chat content shows
-      // through. This used to be SurfaceBadgeSemanticBadgeGeneralDuration, an
-      // unrelated badge token at 60% black that left the backdrop translucent.
-      backgroundColor: 'rgb(0, 0, 0)',
-    },
-    stage: {
-      ...StyleSheet.absoluteFillObject,
-      alignItems: 'center',
-      justifyContent: 'center',
-      overflow: 'hidden',
-    },
-    topBar: {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      right: 0,
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'flex-start',
-      padding: 16,
-      // Web .mediaViewer__topBar/__bottomBar: rgb(0 0 0 / 50%). The previous
-      // badge token resolved to the same 50%, but expressing it as a literal
-      // matches ImageViewer (3b2e546c) and drops the unrelated token.
-      backgroundColor: 'rgba(0, 0, 0, 0.5)',
-      zIndex: 3,
-    },
-    bottomBar: {
-      position: 'absolute',
-      bottom: 0,
-      left: 0,
-      right: 0,
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      padding: 16,
-      // Web .mediaViewer__topBar/__bottomBar: rgb(0 0 0 / 50%). The previous
-      // badge token resolved to the same 50%, but expressing it as a literal
-      // matches ImageViewer (3b2e546c) and drops the unrelated token.
-      backgroundColor: 'rgba(0, 0, 0, 0.5)',
-      zIndex: 3,
-    },
-    // Host for the chat toast mounted inside this Modal (the global <Toast /> is
-    // outside it and would render beneath the native Modal layer). Sits above the
-    // bottom bar (40 icon + 16*2 padding = 72) so save success/failure stays readable.
-    toastLayer: {
-      position: 'absolute',
-      left: 0,
-      right: 0,
-      bottom: 72,
-      zIndex: 4,
-    },
-    closeButton: {
-      width: 32,
-      height: 32,
-      alignItems: 'center',
-      justifyContent: 'center',
-      padding: 4,
-      borderRadius: 9999,
-      backgroundColor: token(
-        AmityColorToken.SurfaceIconButtonTransparentPrimaryEnabled
-      ),
-    },
-    bottomIconButton: {
-      width: 40,
-      height: 40,
-      alignItems: 'center',
-      justifyContent: 'center',
-      padding: 8,
-      borderRadius: 9999,
-      backgroundColor: token(
-        AmityColorToken.SurfaceIconButtonTransparentPrimaryEnabled
-      ),
-    },
-  });
-
-  return { styles, token };
-};

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

@@ -1,100 +0,0 @@
-// MessageFullTextScreen — ported from AmityUiKitWeb features/shared/components/
-// MessageFullTextScreen. The full-screen "see more" long-text view. Web renders a
-// fixed overlay dialog + `linkify-react`; RN uses a full-screen Modal (Android
-// back button === web Escape via onRequestClose) and a small local linkifier that
-// renders URL runs as tappable Text opening the system browser. Header carries a
-// ghost back button, a centered title, and a balancing spacer.
-
-// 1. React / RN imports
-import { Fragment } from 'react';
-import { Linking, Modal, Pressable, ScrollView, View } from 'react-native';
-
-// 2. Internal imports
-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 MessageFullTextScreenProps = {
-  visible: boolean;
-  text: string;
-  title?: string;
-  onClose: () => void;
-};
-
-// Matches http(s) URLs and bare www.* runs; kept local so the component is
-// self-contained (no dependency on the legacy PreviewLink util module). The split
-// regex is global (capturing) so URL runs survive `String.split`; a separate
-// non-global regex is used for per-part testing to avoid stateful `lastIndex`.
-const URL_SPLIT_REGEX = /((?:https?:\/\/|www\.)[^\s]+)/gi;
-const URL_TEST_REGEX = /^(?:https?:\/\/|www\.)[^\s]+$/i;
-
-function openLink(raw: string) {
-  const href = raw.startsWith('http') ? raw : `https://${raw}`;
-  Linking.openURL(href).catch(() => undefined);
-}
-
-// 4. Named function component
-export function MessageFullTextScreen({
-  visible,
-  text,
-  title,
-  onClose,
-}: MessageFullTextScreenProps) {
-  const { styles } = useStyles();
-
-  const parts = text.split(URL_SPLIT_REGEX);
-
-  return (
-    <Modal
-      visible={visible}
-      animationType="slide"
-      onRequestClose={onClose}
-      transparent={false}
-    >
-      <View style={styles.screen}>
-        <View style={styles.header}>
-          <Pressable
-            style={styles.backButton}
-            onPress={onClose}
-            accessibilityRole="button"
-            accessibilityLabel="Back"
-          >
-            <AmityIcon
-              name="chevron-left"
-              size={24}
-              tokenColor={AmityColorToken.IconIconButtonGhostSecondaryDefault}
-            />
-          </Pressable>
-          <Typography
-            variant="titleBold"
-            style={styles.title}
-            numberOfLines={1}
-          >
-            {title}
-          </Typography>
-          <View style={styles.headerSpacer} />
-        </View>
-        <ScrollView style={styles.body}>
-          <Typography variant="body" style={styles.text} selectable>
-            {parts.map((part, index) =>
-              URL_TEST_REGEX.test(part) ? (
-                <Typography
-                  key={`${part}-${index}`}
-                  variant="body"
-                  style={[styles.text, styles.link]}
-                  onPress={() => openLink(part)}
-                >
-                  {part}
-                </Typography>
-              ) : (
-                <Fragment key={`t-${index}`}>{part}</Fragment>
-              )
-            )}
-          </Typography>
-        </ScrollView>
-      </View>
-    </Modal>
-  );
-}

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

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

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

@@ -1,59 +0,0 @@
-// Styles for MessageFullTextScreen — ported from MessageFullTextScreen.module.css.
-// Web is a fixed full-viewport overlay; RN uses a full-screen Modal. Geometry:
-// header padding 1rem→16, gap 0.5rem→8; back button / spacer 2rem→32; body
-// padding 1rem→16. Body text is raw CSS in web (17px/24px) — replicated via the
-// Typography `style` override. Web `Surface/Sheets/Background/Default` maps to the
-// RN token `Surface/Sheets/Background/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({
-    screen: {
-      flex: 1,
-      backgroundColor: token(AmityColorToken.SurfacePageBackgroundDefault),
-    },
-    header: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      gap: 8,
-      padding: 16,
-      backgroundColor: token(AmityColorToken.SurfaceSheetsBackgroundGeneral),
-    },
-    backButton: {
-      width: 32,
-      height: 32,
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-    title: {
-      flex: 1,
-      textAlign: 'center',
-      color: token(AmityColorToken.TextSheetsHeaderTitleDefault),
-    },
-    headerSpacer: {
-      width: 32,
-      height: 32,
-    },
-    body: {
-      flex: 1,
-      padding: 16,
-      backgroundColor: token(AmityColorToken.SurfacePageBackgroundDefault),
-    },
-    text: {
-      fontSize: 17,
-      lineHeight: 24,
-      color: token(AmityColorToken.TextChatBubbleInboundMessagesDefault),
-    },
-    link: {
-      color: token(AmityColorToken.TextChatBubbleInboundLinkDefault),
-      textDecorationLine: 'underline',
-    },
-  });
-
-  return { styles, token };
-};