@amityco/react-native-social-uikit 4.1.0 → 4.1.1-d7da0c5c.0

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

@@ -0,0 +1,262 @@
+// 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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,58 @@
+// 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

@@ -0,0 +1,145 @@
+// 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

@@ -0,0 +1,38 @@
+// 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

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

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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,21 @@
+// 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

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

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

@@ -0,0 +1,29 @@
+// 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

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

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

@@ -0,0 +1,28 @@
+// 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} />;
+}