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

package/src/core/design/components/TextEditor/TextEditor.tsx

@@ -1,262 +0,0 @@
-// TextEditor — RN equivalent of AmityUiKitWeb core/design/components/TextEditor.
-// Web is a 646-line Lexical contentEditable editor (mentions, hashtags, links,
-// products). RN has no contentEditable, so this is a controlled multiline
-// TextInput that owns the plain-text authority plus lightweight mention
-// tracking. It exposes an imperative handle (focus/blur/clear/insertMention +
-// getters for the SDK payload) and a render slot for the mention overlay.
-//
-// Deliberately NOT ported: hashtags, product mentions, URL/link detection,
-// character-limit plugins, floating link editor. Mention position tracking is
-// best-effort (see utils.reconcileMentions).
-
-// 1. React / RN imports
-import {
-  forwardRef,
-  useCallback,
-  useImperativeHandle,
-  useRef,
-  useState,
-  type ReactNode,
-} from 'react';
-import {
-  Text,
-  TextInput,
-  View,
-  type NativeSyntheticEvent,
-  type TextInputContentSizeChangeEventData,
-  type TextInputSelectionChangeEventData,
-} from 'react-native';
-
-// 2. Internal imports
-import { useStyles } from './styles';
-import {
-  detectMentionQuery,
-  insertMentionToken,
-  reconcileMentions,
-  toMentionees,
-  type MentionSegment,
-} from './utils';
-
-// 3. Types
-export type TextEditorHandle = {
-  focus: () => void;
-  blur: () => void;
-  clear: () => void;
-  insertMention: (mention: {
-    userId: string;
-    display: string;
-    type?: 'user' | 'channel';
-  }) => void;
-  getText: () => string;
-  getMentioned: () => MentionSegment[];
-  getMentionees: () => (Amity.UserMention | Amity.ChannelMention)[];
-};
-
-export type TextEditorProps = {
-  value: string;
-  onChangeText: (text: string) => void;
-  /** Called on submit (return key / send). */
-  onSend?: () => void;
-  placeholder?: string;
-  placeholderTextColor?: string;
-  editable?: boolean;
-  autoFocus?: boolean;
-  maxHeight?: number;
-  /**
-   * Fires whenever the active `@query` at the caret changes. `null` means the
-   * caret is not inside a mention token — the consumer should hide the overlay.
-   */
-  onMentionQueryChange?: (query: string | null) => void;
-  /** Slot rendered above the input (the mention suggestion list). */
-  mentionOverlay?: ReactNode;
-  style?: import('react-native').StyleProp<import('react-native').ViewStyle>;
-};
-
-// 4. Named function component (forwardRef for the imperative handle)
-export const TextEditor = forwardRef<TextEditorHandle, TextEditorProps>(
-  function TextEditor(
-    {
-      value,
-      onChangeText,
-      onSend,
-      placeholder,
-      placeholderTextColor,
-      editable = true,
-      autoFocus = false,
-      maxHeight = 120,
-      onMentionQueryChange,
-      mentionOverlay,
-      style,
-    },
-    ref
-  ) {
-    const { styles, placeholderColor } = useStyles();
-    const inputRef = useRef<TextInput>(null);
-
-    // TextEditor is the text authority: previous value + committed mentions are
-    // kept in refs so edits reconcile without extra renders.
-    const prevValueRef = useRef(value);
-    const mentionsRef = useRef<MentionSegment[]>([]);
-    const caretRef = useRef(value.length);
-
-    // Controlled selection is only driven imperatively (after insertMention);
-    // otherwise we leave it undefined so the native caret behaves normally.
-    const [selection, setSelection] = useState<
-      { start: number; end: number } | undefined
-    >(undefined);
-
-    // Auto-grow: the input height tracks its content height
-    // (onContentSizeChange), clamped so the boxed wrapper grows from a single
-    // line up to `maxHeight`, then the input scrolls internally — matching web's
-    // composer inputWrapper (min-height 2.5rem → max-height 7.5rem). LINE_HEIGHT
-    // and WRAPPER_VERTICAL_PADDING mirror styles.ts (lineHeight 20 / paddingVertical 10).
-    const LINE_HEIGHT = 20;
-    const WRAPPER_VERTICAL_PADDING = 10;
-    const minInputHeight = LINE_HEIGHT;
-    const maxInputHeight = maxHeight - WRAPPER_VERTICAL_PADDING * 2;
-    const [contentHeight, setContentHeight] = useState(minInputHeight);
-    const inputHeight = Math.min(
-      Math.max(contentHeight, minInputHeight),
-      maxInputHeight
-    );
-
-    const handleContentSizeChange = useCallback(
-      (e: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {
-        setContentHeight(e.nativeEvent.contentSize.height);
-      },
-      []
-    );
-
-    const emitQuery = useCallback(
-      (text: string, caret: number) => {
-        if (!onMentionQueryChange) return;
-        const active = detectMentionQuery(text, caret);
-        onMentionQueryChange(active ? active.query : null);
-      },
-      [onMentionQueryChange]
-    );
-
-    const handleChangeText = useCallback(
-      (nextText: string) => {
-        mentionsRef.current = reconcileMentions(
-          prevValueRef.current,
-          nextText,
-          mentionsRef.current
-        );
-        prevValueRef.current = nextText;
-        // Native controlled selection resets after our programmatic set; clear it.
-        setSelection(undefined);
-        onChangeText(nextText);
-        emitQuery(nextText, caretRef.current);
-      },
-      [onChangeText, emitQuery]
-    );
-
-    const handleSelectionChange = useCallback(
-      (e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
-        caretRef.current = e.nativeEvent.selection.start;
-        emitQuery(prevValueRef.current, caretRef.current);
-      },
-      [emitQuery]
-    );
-
-    useImperativeHandle(
-      ref,
-      () => ({
-        focus: () => inputRef.current?.focus(),
-        blur: () => inputRef.current?.blur(),
-        clear: () => {
-          mentionsRef.current = [];
-          prevValueRef.current = '';
-          caretRef.current = 0;
-          setSelection(undefined);
-          onChangeText('');
-          onMentionQueryChange?.(null);
-        },
-        insertMention: (mention) => {
-          const active = detectMentionQuery(
-            prevValueRef.current,
-            caretRef.current
-          );
-          const start = active ? active.start : caretRef.current;
-          const { text, segment, caret } = insertMentionToken(
-            prevValueRef.current,
-            start,
-            caretRef.current,
-            {
-              userId: mention.userId,
-              display: mention.display,
-              type: mention.type ?? 'user',
-            }
-          );
-          mentionsRef.current = [...mentionsRef.current, segment];
-          prevValueRef.current = text;
-          caretRef.current = caret;
-          setSelection({ start: caret, end: caret });
-          onChangeText(text);
-          onMentionQueryChange?.(null);
-        },
-        getText: () => prevValueRef.current,
-        getMentioned: () => mentionsRef.current,
-        getMentionees: () => toMentionees(mentionsRef.current),
-      }),
-      [onChangeText, onMentionQueryChange]
-    );
-
-    // Render the value with inserted mention tokens coloured (web highlights the
-    // mention node primary). RN TextInput can't colour substrings of a plain
-    // `value`, so pass formatted <Text> children instead — only when mentions
-    // exist, so the common no-mention path stays a plain controlled input.
-    // NOTE: needs on-device QA (iOS + Android) for cursor/selection behaviour.
-    const renderFormattedValue = (): ReactNode => {
-      const segs = [...mentionsRef.current]
-        .filter((m) => m.index >= 0 && m.index + m.length + 1 <= value.length)
-        .sort((a, b) => a.index - b.index);
-      if (segs.length === 0) return undefined; // plain text via `value`
-      const parts: ReactNode[] = [];
-      let cursor = 0;
-      segs.forEach((m, i) => {
-        const end = m.index + m.length + 1; // '@' + display name
-        if (m.index > cursor) parts.push(value.slice(cursor, m.index));
-        parts.push(
-          <Text key={`m-${i}`} style={styles.mention}>
-            {value.slice(m.index, end)}
-          </Text>
-        );
-        cursor = end;
-      });
-      if (cursor < value.length) parts.push(value.slice(cursor));
-      return parts;
-    };
-
-    // RN throws "Cannot specify both value and children in InternalTextInput" if
-    // `value` is set while the TextInput also has children. When mentions exist we
-    // render coloured <Text> children (which then act as the displayed value), so
-    // `value` must be passed ONLY in the plain-text (no-children) path.
-    const formatted = renderFormattedValue();
-
-    return (
-      <View style={[styles.wrapper, { maxHeight }, style]}>
-        {mentionOverlay}
-        <TextInput
-          ref={inputRef}
-          style={[styles.input, { height: inputHeight }]}
-          {...(formatted === undefined ? { value } : null)}
-          onChangeText={handleChangeText}
-          onContentSizeChange={handleContentSizeChange}
-          onSelectionChange={handleSelectionChange}
-          selection={selection}
-          placeholder={placeholder}
-          placeholderTextColor={placeholderTextColor ?? placeholderColor}
-          editable={editable}
-          autoFocus={autoFocus}
-          multiline
-          onSubmitEditing={onSend}
-          blurOnSubmit={false}
-        >
-          {formatted}
-        </TextInput>
-      </View>
-    );
-  }
-);

package/src/core/design/components/TextEditor/index.ts

@@ -1,4 +0,0 @@
-export { TextEditor } from './TextEditor';
-export type { TextEditorHandle, TextEditorProps } from './TextEditor';
-export type { MentionSegment } from './utils';
-export { toMentionees } from './utils';

package/src/core/design/components/TextEditor/styles.ts

@@ -1,58 +0,0 @@
-// Styles for the RN TextEditor. Geometry mirrors the composer input surface
-// (web MessageComposer.module.css): radius 1.25rem→20, padding 0.625rem 0.75rem
-// →10/12, min-height 2.5rem→40, editor font 1rem/1.25rem→16/20. All colours
-// resolve through design tokens.
-
-import { StyleSheet } from 'react-native';
-import { useToken } from '../../theme/useToken';
-import { AmityColorToken } from '../../tokens/amity-color-tokens';
-
-export const useStyles = () => {
-  const token = useToken();
-
-  const styles = StyleSheet.create({
-    wrapper: {
-      flex: 1,
-      minWidth: 0,
-      backgroundColor: token(AmityColorToken.SurfaceInputBoxedInputDefault),
-      borderRadius: 20,
-      paddingVertical: 10,
-      paddingHorizontal: 12,
-      minHeight: 40,
-      justifyContent: 'center',
-    },
-    // No `flex` here: the input height is driven explicitly from content size
-    // (TextEditor auto-grow) so the boxed wrapper can grow line-by-line up to
-    // maxHeight, then the input scrolls. A vertical flex would fight that height.
-    input: {
-      fontSize: 16,
-      lineHeight: 20,
-      padding: 0,
-      textAlignVertical: 'top',
-      // Web composer editor uses text-input-textinput-placeholder-enabled-filled for
-      // typed text; that token flips (dark-grey in light mode, white in dark). Its RN
-      // path is ".../Placeholder/Enabled-Filled" (Enabled-Filled is ONE hyphenated
-      // segment — guessing "Enabled/Filled" resolves to the missing sentinel).
-      color: token(AmityColorToken.TextInputTextInputPlaceholderEnabledFilled),
-    },
-    // Inserted mention token — web colours it with the editor highlight token
-    // (text-input-textinput-placeholder-enabled-highlight = Primary/500·400).
-    // Must repeat the input's fontSize/lineHeight: a nested <Text> inside a
-    // TextInput does NOT reliably inherit the parent's lineHeight on Android, so
-    // without these it renders at the font's natural (taller) line height and its
-    // bottom gets clipped by the 20px line box sized from the surrounding text.
-    mention: {
-      color: token(
-        AmityColorToken.TextInputTextInputPlaceholderEnabledHighlight
-      ),
-      fontSize: 16,
-      lineHeight: 20,
-    },
-  });
-
-  const placeholderColor = token(
-    AmityColorToken.TextInputTextInputPlaceholderEnabled
-  );
-
-  return { styles, token, placeholderColor };
-};

package/src/core/design/components/TextEditor/utils.ts

@@ -1,145 +0,0 @@
-// Mention-aware text utilities for the RN TextEditor.
-// Web uses Lexical + contentEditable MentionNodes to track mentions structurally.
-// RN has a plain string in a TextInput, so we track mentions as positioned
-// segments over that string and reconcile their positions as the text is edited.
-// This is best-effort index tracking (see reconcileMentions) — good enough for
-// the composer, not a full rich-text model.
-
-/** A committed mention segment, mirroring web `Mentioned` metadata. */
-export type MentionSegment = {
-  /** Index of the leading `@` in the plain text. */
-  index: number;
-  /** Length of the display name (excludes the `@`), matching web metadata. */
-  length: number;
-  /** 'user' for a specific member, 'channel' for @all. */
-  type: 'user' | 'channel';
-  /** userId for a user mention; '@all' for a channel mention. */
-  userId: string;
-  /** Display name shown in the text (without the `@`). */
-  display: string;
-};
-
-const AT = '@';
-
-/** Length of the `@display` token in the text (the `@` plus the display name). */
-function tokenLength(m: MentionSegment): number {
-  return m.length + AT.length;
-}
-
-/**
- * Detect an active mention query at the caret: an `@` token the caret sits
- * inside, whose `@` is at the start of the text or preceded by whitespace and
- * which contains no whitespace between the `@` and the caret. Returns the query
- * (text after `@`) and the index of the `@`, or null when the caret is not in a
- * mention token.
- */
-export function detectMentionQuery(
-  text: string,
-  caret: number
-): { query: string; start: number } | null {
-  if (caret < 0 || caret > text.length) return null;
-
-  // Walk backwards from the caret to find the `@` that opens the token.
-  let i = caret - 1;
-  while (i >= 0) {
-    const ch = text[i];
-    if (ch === AT) {
-      const before = i > 0 ? text[i - 1] : undefined;
-      if (before === undefined || /\s/.test(before)) {
-        return { query: text.slice(i + 1, caret), start: i };
-      }
-      return null;
-    }
-    if (/\s/.test(ch)) return null;
-    i -= 1;
-  }
-  return null;
-}
-
-/**
- * Re-position mention segments after a text edit. Uses a common prefix/suffix
- * diff: mentions fully before the change are kept, mentions fully after it are
- * shifted by the length delta, and any mention overlapping the changed region
- * is dropped (its text was touched, so it is no longer a valid mention).
- */
-export function reconcileMentions(
-  oldText: string,
-  newText: string,
-  mentions: MentionSegment[]
-): MentionSegment[] {
-  if (oldText === newText || mentions.length === 0) return mentions;
-
-  const maxPrefix = Math.min(oldText.length, newText.length);
-  let prefix = 0;
-  while (prefix < maxPrefix && oldText[prefix] === newText[prefix]) prefix += 1;
-
-  let suffix = 0;
-  while (
-    suffix < maxPrefix - prefix &&
-    oldText[oldText.length - 1 - suffix] ===
-      newText[newText.length - 1 - suffix]
-  ) {
-    suffix += 1;
-  }
-
-  const changeStart = prefix;
-  const oldChangeEnd = oldText.length - suffix;
-  const delta = newText.length - oldText.length;
-
-  const next: MentionSegment[] = [];
-  for (const m of mentions) {
-    const start = m.index;
-    const end = m.index + tokenLength(m);
-
-    if (end <= changeStart) {
-      next.push(m); // entirely before the edit
-    } else if (start >= oldChangeEnd) {
-      next.push({ ...m, index: m.index + delta }); // entirely after the edit
-    }
-    // else: overlaps the edit → drop it
-  }
-  return next;
-}
-
-/**
- * Replace the active `@query` token (from `queryStart` up to `caret`) with
- * `@display ` (trailing space) and return the new text, the new mention segment,
- * and the caret position to place after the inserted token.
- */
-export function insertMentionToken(
-  text: string,
-  queryStart: number,
-  caret: number,
-  mention: { userId: string; display: string; type: 'user' | 'channel' }
-): { text: string; segment: MentionSegment; caret: number } {
-  const token = `${AT}${mention.display} `;
-  const nextText = text.slice(0, queryStart) + token + text.slice(caret);
-  const segment: MentionSegment = {
-    index: queryStart,
-    length: mention.display.length,
-    type: mention.type,
-    userId: mention.userId,
-    display: mention.display,
-  };
-  return { text: nextText, segment, caret: queryStart + token.length };
-}
-
-/**
- * Build the SDK `mentionees` payload for createMessage/editMessage from the
- * committed mention segments. A channel mention (@all) is pushed as its own
- * entry; user mentions are collapsed into a single `userIds` entry. An empty
- * user entry is always included so the backend clears stale mentionees, matching
- * web `extractMetadata`.
- */
-export function toMentionees(
-  mentions: MentionSegment[]
-): (Amity.UserMention | Amity.ChannelMention)[] {
-  const mentionees: (Amity.UserMention | Amity.ChannelMention)[] = [];
-  const hasChannel = mentions.some((m) => m.type === 'channel');
-  if (hasChannel) mentionees.push({ type: 'channel' } as Amity.ChannelMention);
-  mentionees.push({
-    type: 'user',
-    userIds: mentions.filter((m) => m.type === 'user').map((m) => m.userId),
-  } as Amity.UserMention);
-  return mentionees;
-}

package/src/core/design/components/Typography/Typography.tsx

@@ -1,38 +0,0 @@
-// Typography component — ported from AmityUiKitWeb core/components/Typography.
-// Web renders <h1>/<p>/<span> with a per-variant CSS class; here every variant
-// renders an RN <Text>. Metrics come from the SoT type scale (Web column) in
-// tokens/geometry.json; default color from the Text/Base/Default token.
-
-import { Text, type TextProps } from 'react-native';
-import { useStyles } from './styles';
-
-export type TypographyVariant =
-  | 'headline'
-  | 'titleBold'
-  | 'title'
-  | 'bodyBold'
-  | 'body'
-  | 'captionBold'
-  | 'caption'
-  | 'captionSmall';
-
-export type TypographyProps = TextProps & {
-  variant?: TypographyVariant;
-};
-
-export function Typography({
-  variant = 'body',
-  style,
-  children,
-  ...rest
-}: TypographyProps) {
-  const { styles } = useStyles();
-
-  // Caller `style` is applied after the variant style so overrides win,
-  // preserving the web `color: inherit` re-tint behaviour.
-  return (
-    <Text style={[styles[variant], style]} {...rest}>
-      {children}
-    </Text>
-  );
-}

package/src/core/design/components/Typography/index.ts

@@ -1,2 +0,0 @@
-export { Typography } from './Typography';
-export type { TypographyProps, TypographyVariant } from './Typography';

package/src/core/design/components/Typography/styles.ts

@@ -1,31 +0,0 @@
-import { StyleSheet } from 'react-native';
-import { useToken } from '../../theme/useToken';
-import { AmityColorToken } from '../../tokens/amity-color-tokens';
-
-// Metrics from SoT tokens/geometry.json → typography.styles (Web column):
-//   Headline     20 / 24 / 700
-//   Title Bold   16 / 24 / 600
-//   Title        16 / 24 / 400
-//   Body Bold    14 / 20 / 600
-//   Body         14 / 20 / 400
-//   Caption Bold 12 / 16 / 600
-//   Caption      12 / 16 / 400
-//   Caption Small 12 / 12 / 400
-// (fontSize / lineHeight / fontWeight). Web CSS sets no letter-spacing, so none here.
-export const useStyles = () => {
-  const token = useToken();
-  const color = token(AmityColorToken.TextListHeaderDefaultDefault);
-
-  const styles = StyleSheet.create({
-    headline: { color, fontSize: 20, lineHeight: 24, fontWeight: '700' },
-    titleBold: { color, fontSize: 16, lineHeight: 24, fontWeight: '600' },
-    title: { color, fontSize: 16, lineHeight: 24, fontWeight: '400' },
-    bodyBold: { color, fontSize: 14, lineHeight: 20, fontWeight: '600' },
-    body: { color, fontSize: 14, lineHeight: 20, fontWeight: '400' },
-    captionBold: { color, fontSize: 12, lineHeight: 16, fontWeight: '600' },
-    caption: { color, fontSize: 12, lineHeight: 16, fontWeight: '400' },
-    captionSmall: { color, fontSize: 12, lineHeight: 12, fontWeight: '400' },
-  });
-
-  return { styles };
-};

package/src/core/design/elements/ModeratorBadge/ModeratorBadge.tsx

@@ -1,21 +0,0 @@
-// ModeratorBadge element — ported from AmityUiKitWeb core/design/elements/ModeratorBadge.
-// Thin wrapper over the Badge atom: a bordered icon chip carrying the
-// `userstatus/moderator` preset with the solid shield-check glyph.
-
-import { Badge, type BadgeSize } from '../../atoms/Badge';
-
-export type ModeratorBadgeProps = {
-  size?: BadgeSize;
-};
-
-// Web hardcodes size=16 and the userstatus/moderator preset with ShieldCheck.Solid.
-export function ModeratorBadge({ size = 16 }: ModeratorBadgeProps) {
-  return (
-    <Badge.Icon
-      border
-      icon="shield-check-s"
-      preset={{ family: 'userstatus', case: 'moderator' }}
-      size={size}
-    />
-  );
-}

package/src/core/design/elements/ModeratorBadge/index.ts

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

package/src/core/design/elements/PrivateBadge/PrivateBadge.tsx

@@ -1,29 +0,0 @@
-// PrivateBadge element — Badge.Icon with the chat/private (lock) preset.
-// QA deviation from web: web's chat/private preset flips per theme (light =
-// light-blue circle + blue lock; dark = blue circle + light lock). Per QA the
-// lock must read WHITE in light, so we force a consistent blue circle + white
-// lock in both themes via colour overrides (white icon + Primary/500 surface).
-// Geometry (size/border) still comes from the preset.
-
-import { Badge, type BadgeSize } from '../../atoms/Badge';
-import { AmityColorToken } from '../../tokens/amity-color-tokens';
-
-export type PrivateBadgeProps = {
-  size?: BadgeSize;
-  border?: boolean;
-};
-
-export function PrivateBadge({ size = 16, border = false }: PrivateBadgeProps) {
-  return (
-    <Badge.Icon
-      icon="lock-keyhole-s"
-      preset={{ family: 'chat', case: 'private' }}
-      size={size}
-      border={border}
-      surfaceColorToken={AmityColorToken.SurfaceFeaturedIconSolid}
-      iconColorToken={
-        AmityColorToken.IconBadgeSemanticBadgeCommunityGeneralDefault
-      }
-    />
-  );
-}

package/src/core/design/elements/PrivateBadge/index.ts

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

package/src/core/design/icons/AmityIcon.tsx

@@ -1,28 +0,0 @@
-// AmityIcon — render a SoT icon by name, tinted via a design token.
-// RN has no svg-transformer configured, so icons are raw SVG xml (from the generated
-// registry) rendered through react-native-svg's SvgXml, with the fill placeholder
-// replaced by a resolved token colour.
-
-import { SvgXml } from 'react-native-svg';
-import { getIconXml, type AmityIconName } from './generated/iconRegistry';
-import { useToken, type ColorTokenRef } from '../theme/useToken';
-
-export interface AmityIconProps {
-  name: AmityIconName;
-  size?: number;
-  /** Preferred: tint from a design token. */
-  tokenColor?: ColorTokenRef;
-  /** Escape hatch: explicit colour (falls back to the icon's default fill if unset). */
-  color?: string;
-}
-
-export function AmityIcon({
-  name,
-  size = 24,
-  tokenColor,
-  color,
-}: AmityIconProps) {
-  const token = useToken();
-  const fill = tokenColor ? token(tokenColor) : color;
-  return <SvgXml xml={getIconXml(name, fill)} width={size} height={size} />;
-}