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

package/src/core/localization/defaults/th.ts

@@ -0,0 +1,18 @@
+/**
+ * UIKit v4 — Thai Locale Bundle (test fixture)
+ *
+ * Generated by scripts/generate-th-locale.js.
+ * Known common labels carry real Thai translations.
+ * All other values are prefixed "[TH] " for visual confirmation during testing.
+ *
+ * Usage:
+ *   import { thLocaleBundle } from '~/v4/core/localization/defaults/th';
+ *   // Pass to AmityUIKitProvider:
+ *   <AmityUIKitProvider localization={{ localeBundle: thLocaleBundle }} ... />
+ *   // Or for automatic device-language detection:
+ *   <AmityUIKitProvider localization={{ localeMap: { th: thLocaleBundle } }} ... />
+ */
+
+import bundle from './th.json';
+
+export const thLocaleBundle: Record<string, string> = bundle;

package/src/core/localization/index.ts

@@ -0,0 +1,41 @@
+/**
+ * UIKit v4 Localization — public API barrel
+ *
+ * String resolution (Levels 2–5):
+ *   import { resolveString, setStringOverrides, clearStringOverrides,
+ *            setLocaleBundle, clearLocaleBundle } from '~/v4/core/localization';
+ *
+ * React hook:
+ *   import { useString } from '~/v4/core/localization';
+ *
+ * Provider (wrap your app tree):
+ *   import { LocaleProvider, useLocale } from '~/v4/core/localization';
+ *
+ * Types:
+ *   import type { LocaleBundle, FormatArg } from '~/v4/core/localization';
+ *
+ * Default bundles / locale map (device-language detection):
+ *   import { defaultLocaleBundle, thLocaleBundle, defaultLocaleMap } from '~/v4/core/localization';
+ */
+
+export {
+  resolveString,
+  setStringOverrides,
+  clearStringOverrides,
+  setLocaleBundle,
+  clearLocaleBundle,
+  applyFormat,
+  _resetLocalizationState,
+  _getLocalizationState,
+} from './resolveString';
+
+export type { LocaleBundle, FormatArg } from './resolveString';
+
+export { LocaleProvider, LocaleContext, useLocale } from './LocaleProvider';
+export type { LocaleContextValue, LocaleProviderProps } from './LocaleProvider';
+
+export { useString } from './useString';
+
+export { defaultLocaleBundle } from './defaults/en';
+export { thLocaleBundle } from './defaults/th';
+export { defaultLocaleMap } from './defaultLocaleMap';

package/src/core/localization/resolveString.ts

@@ -0,0 +1,176 @@
+/**
+ * UIKit v4 — String Resolution Chain (Levels 2–5)
+ *
+ * Implements the priority chain from the UIKit Cross-Platform Localization Spec §1:
+ *
+ *   Level 1: Config text (remote)  — handled by useAmityElement / CustomizationProvider
+ *   Level 2: Programmatic override — setStringOverrides / clearStringOverrides
+ *   Level 3: Locale bundle         — setLocaleBundle / clearLocaleBundle
+ *   Level 4: Library default       — defaultLocaleBundle (auto-generated en.ts)
+ *   Level 5: Key name fallback     — returns the raw key string
+ *
+ * Usage:
+ *   import { resolveString } from '~/v4/core/localization/resolveString';
+ *   const text = resolveString('amity_social_create_post');
+ *   const text = resolveString('amity_social_items_count', 42);  // format arg
+ */
+
+import { defaultLocaleBundle } from './defaults/en';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export type LocaleBundle = Record<string, string>;
+
+/** A format arg can be a string or number (matches iOS/Android %s / %d). */
+export type FormatArg = string | number;
+
+// ---------------------------------------------------------------------------
+// In-memory runtime state (module singletons — reset between test runs via reset())
+// ---------------------------------------------------------------------------
+
+let _overrides: LocaleBundle = {};
+let _localeBundle: LocaleBundle | null = null;
+
+// ---------------------------------------------------------------------------
+// Public API — Level 2: Programmatic overrides
+// ---------------------------------------------------------------------------
+
+/**
+ * Register key–value overrides that win over locale bundles and library defaults.
+ * Multiple calls MERGE (not replace). Later value wins for the same key.
+ *
+ * @example
+ *   setStringOverrides({ amity_common_cancel: 'Dismiss' });
+ */
+export function setStringOverrides(overrides: LocaleBundle): void {
+  _overrides = { ..._overrides, ...overrides };
+}
+
+/**
+ * Clear all programmatic overrides. Keys fall through to Level 3 / Level 4.
+ */
+export function clearStringOverrides(): void {
+  _overrides = {};
+}
+
+// ---------------------------------------------------------------------------
+// Public API — Level 3: Locale bundle
+// ---------------------------------------------------------------------------
+
+/**
+ * Set (or replace) the active locale bundle.
+ * REPLACE semantics: calling this again with a partial dict discards previous keys.
+ *
+ * @param bundle  key → translated string for the desired locale
+ *
+ * @example
+ *   setLocaleBundle({ amity_common_cancel: 'キャンセル', amity_common_delete: '削除' });
+ */
+export function setLocaleBundle(bundle: LocaleBundle): void {
+  _localeBundle = { ...bundle };
+}
+
+/**
+ * Deactivate the locale bundle. Keys fall through to Level 4 (library defaults).
+ */
+export function clearLocaleBundle(): void {
+  _localeBundle = null;
+}
+
+// ---------------------------------------------------------------------------
+// Core resolver
+// ---------------------------------------------------------------------------
+
+/**
+ * Resolve a localization key to its English (or translated) string.
+ *
+ * Resolution order:
+ *   1. Config text (Level 1) — not resolved here; handled by useAmityElement
+ *   2. Programmatic override (Level 2)
+ *   3. Active locale bundle  (Level 3)
+ *   4. Library default       (Level 4)
+ *   5. Raw key name          (Level 5 — indicates a missing library default)
+ *
+ * @param key         Canonical amity_* key e.g. 'amity_social_create_post'
+ * @param formatArgs  Optional positional arguments applied to %s / %d / %1$s placeholders
+ *
+ * @example
+ *   resolveString('amity_social_create_post')          // → 'Create post'
+ *   resolveString('amity_social_items_count', 5)       // → '5 items'
+ */
+export function resolveString(key: string, ...formatArgs: FormatArg[]): string {
+  // Level 2
+  if (Object.prototype.hasOwnProperty.call(_overrides, key)) {
+    return applyFormat(_overrides[key], formatArgs);
+  }
+
+  // Level 3
+  if (_localeBundle !== null && Object.prototype.hasOwnProperty.call(_localeBundle, key)) {
+    return applyFormat(_localeBundle[key], formatArgs);
+  }
+
+  // Level 4
+  if (Object.prototype.hasOwnProperty.call(defaultLocaleBundle, key)) {
+    return applyFormat(defaultLocaleBundle[key], formatArgs);
+  }
+
+  // Level 5 — safety net; should never fire for UIKit-internal keys
+  return key;
+}
+
+// ---------------------------------------------------------------------------
+// Format string helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Apply positional format arguments to a string.
+ *
+ * Supports:
+ *   %s  / %1$s  / %2$s  — string substitution
+ *   %d  / %1$d  / %2$d  — integer substitution
+ *   %@              — iOS-style string substitution
+ *
+ * Arguments are consumed in order of their declared index (1-based $n or positional).
+ */
+export function applyFormat(template: string, args: FormatArg[]): string {
+  if (args.length === 0) return template;
+
+  // Indexed: %1$s, %2$d, …
+  let maxIndexUsed = 0;
+  let result = template.replace(/%(\d+)\$[sd@]/g, (_, idx) => {
+    const n = parseInt(idx, 10);
+    if (n > maxIndexUsed) maxIndexUsed = n;
+    const arg = args[n - 1];
+    return arg !== undefined ? String(arg) : _;
+  });
+
+  // Positional: %s, %d, %@ — replaced left-to-right, starting after any indexed args
+  let pos = maxIndexUsed;
+  result = result.replace(/%[sd@]/g, () => {
+    const arg = args[pos];
+    pos++;
+    return arg !== undefined ? String(arg) : '%s';
+  });
+
+  return result;
+}
+
+// ---------------------------------------------------------------------------
+// Test helpers
+// ---------------------------------------------------------------------------
+
+/** Reset all runtime state. Use this in test beforeEach / afterEach. */
+export function _resetLocalizationState(): void {
+  _overrides = {};
+  _localeBundle = null;
+}
+
+/** Read-only snapshot of current state (for testing assertions). */
+export function _getLocalizationState(): {
+  overrides: Readonly<LocaleBundle>;
+  localeBundle: Readonly<LocaleBundle> | null;
+} {
+  return { overrides: _overrides, localeBundle: _localeBundle };
+}

package/src/core/localization/useString.ts

@@ -0,0 +1,30 @@
+/**
+ * useString — React hook wrapper for the UIKit localization resolver.
+ *
+ * Returns the resolved string for a key, re-rendering automatically when the
+ * locale bundle or overrides change via the LocaleProvider context.
+ *
+ * @example
+ *   const label = useString('amity_common_button_cancel');
+ *   const msg   = useString('amity_social_items_count', count);
+ */
+
+import { useContext } from 'react';
+import { LocaleContext } from './LocaleProvider';
+import { resolveString, type FormatArg } from './resolveString';
+
+/**
+ * Resolve a localization key to its display string.
+ *
+ * Thin wrapper around {@link resolveString} that subscribes to the
+ * {@link LocaleContext} so the component re-renders whenever locale or
+ * overrides change.
+ *
+ * @param key         Canonical amity_* key
+ * @param formatArgs  Optional positional format arguments (%s / %d / %@)
+ */
+export function useString(key: string, ...formatArgs: FormatArg[]): string {
+  // Subscribe to context updates — triggers re-render when locale changes
+  useContext(LocaleContext);
+  return resolveString(key, ...formatArgs);
+}

package/src/core/providers/AmityUIKitProvider.tsx

@@ -17,7 +17,10 @@ import BottomSheetComponent from '../../social/components/BottomSheetComponent/B
 import Toast from '../../social/components/Toast';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { ErrorBoundary } from '../components/ErrorBoundary';
+import { AmityThemeProvider } from '../design/theme';
+import { LocaleProvider } from '../localization';
 
 export type CusTomTheme = typeof DefaultTheme;
 export interface IAmityUIkitProvider {
@@ -176,35 +179,43 @@ export default function AmityUiKitProvider({
 
   return (
     <ErrorBoundary>
-      <SafeAreaProvider>
-        <QueryClientProvider client={queryClient}>
-          <Provider store={store} context={AmityUIKitReduxContext}>
-            <AuthContextProvider
-              userId={userId}
-              displayName={displayName || undefined}
-              apiKey={apiKey}
-              apiRegion={apiRegion}
-              apiEndpoint={apiEndpoint}
-              authToken={authToken}
-              fcmToken={fcmToken}
-            >
-              <AdEngineProvider>
-                <ConfigProvider configs={configData}>
-                  <BehaviourProvider behaviour={behaviour}>
-                    <ExploreProvider>
-                      <PaperProvider theme={globalTheme}>
-                        {children}
-                        <BottomSheetComponent />
-                        <Toast />
-                      </PaperProvider>
-                    </ExploreProvider>
-                  </BehaviourProvider>
-                </ConfigProvider>
-              </AdEngineProvider>
-            </AuthContextProvider>
-          </Provider>
-        </QueryClientProvider>
-      </SafeAreaProvider>
+      <GestureHandlerRootView style={{ flex: 1 }}>
+        <SafeAreaProvider>
+          <QueryClientProvider client={queryClient}>
+            <Provider store={store} context={AmityUIKitReduxContext}>
+              <AuthContextProvider
+                userId={userId}
+                displayName={displayName || undefined}
+                apiKey={apiKey}
+                apiRegion={apiRegion}
+                apiEndpoint={apiEndpoint}
+                authToken={authToken}
+                fcmToken={fcmToken}
+              >
+                <AdEngineProvider>
+                  <ConfigProvider configs={configData}>
+                    <BehaviourProvider behaviour={behaviour}>
+                      <ExploreProvider>
+                        <PaperProvider theme={globalTheme}>
+                          <AmityThemeProvider
+                            mode={isDarkTheme ? 'dark' : 'light'}
+                          >
+                            <LocaleProvider>
+                              {children}
+                              <BottomSheetComponent />
+                              <Toast />
+                            </LocaleProvider>
+                          </AmityThemeProvider>
+                        </PaperProvider>
+                      </ExploreProvider>
+                    </BehaviourProvider>
+                  </ConfigProvider>
+                </AdEngineProvider>
+              </AuthContextProvider>
+            </Provider>
+          </QueryClientProvider>
+        </SafeAreaProvider>
+      </GestureHandlerRootView>
     </ErrorBoundary>
   );
 }

package/src/core/routes/AmityChatEntry.tsx

@@ -0,0 +1,8 @@
+// AmityUiKitChat — the chat UIKit entry point (mirrors AmityUiKitSocial).
+// Mounts the shared navigator starting at the chat home page.
+
+import AmitySocialUIKitV4Navigator from './AmityUIKitNavigator';
+
+export default function AmityUiKitChat() {
+  return <AmitySocialUIKitV4Navigator initialRouteName="AmityChatHomePage" />;
+}

package/src/core/routes/AmityUIKitNavigator.tsx

@@ -7,6 +7,22 @@ import { navigationRef, onNavigationReady } from './navigation';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import type { RootStackParamList } from './RouteParamList';
 import useAuth from '../hooks/useAuth';
+import AmityChatHomePage from '../../social/features/chat/pages/AmityChatHomePage';
+import AmityChatPage from '../../social/features/chat/pages/AmityChatPage';
+import AmityChannelCreateConversationPage from '../../social/features/chat/pages/AmityChannelCreateConversationPage';
+import AmityGroupChatPage from '../../social/features/chat/pages/AmityGroupChatPage';
+import AmitySelectGroupMemberPage from '../../social/features/chat/pages/AmitySelectGroupMemberPage';
+import AmityCreateGroupChatPage from '../../social/features/chat/pages/AmityCreateGroupChatPage';
+import AmityAddGroupMemberPage from '../../social/features/chat/pages/AmityAddGroupMemberPage';
+import AmityGroupMemberListPage from '../../social/features/chat/pages/AmityGroupMemberListPage';
+import AmityBannedGroupMemberListPage from '../../social/features/chat/pages/AmityBannedGroupMemberListPage';
+import AmityGroupSettingPage from '../../social/features/chat/pages/AmityGroupSettingPage';
+import AmityEditGroupProfilePage from '../../social/features/chat/pages/AmityEditGroupProfilePage';
+import AmityEditGroupMemberPermissionsPage from '../../social/features/chat/pages/AmityEditGroupMemberPermissionsPage';
+import AmitySearchChannelPage from '../../social/features/chat/pages/AmitySearchChannelPage';
+import AmityArchivedChatPage from '../../social/features/chat/pages/AmityArchivedChatPage';
+import AmityGroupNotificationPreferencePage from '../../social/features/chat/pages/AmityGroupNotificationPreferencePage';
+import AmityEditGroupNotificationPage from '../../social/features/chat/pages/AmityEditGroupNotificationPage';
 import AmitySocialHomePage from '../../social/screens/SocialHomePage';
 import PostDetail from '../../social/screens/PostDetail';
 import CreatePost from '../../social/screens/CreatePost';
@@ -61,7 +77,12 @@ const Stack = createNativeStackNavigator<
   'AmitySocialUIKit'
 >();
 
-export default function AmitySocialUIKitV4Navigator() {
+export default function AmitySocialUIKitV4Navigator({
+  initialRouteName = 'AmitySocialHomePage',
+}: {
+  /** Entry screen. Defaults to Social; AmityUiKitChat passes 'AmityChatHomePage'. */
+  initialRouteName?: keyof RootStackParamList;
+} = {}) {
   const theme = useTheme<MyMD3Theme>();
   const { isGlobalBan, isVisitorUsageLimitReached } = useAuth();
   const { AmityGlobalBehaviour } = useBehaviour();
@@ -94,6 +115,7 @@ export default function AmitySocialUIKitV4Navigator() {
       <NavigationContainer ref={navigationRef} onReady={onNavigationReady}>
         <Stack.Navigator
           id="AmitySocialUIKit"
+          initialRouteName={initialRouteName}
           screenOptions={{
             headerShown: false,
             headerShadowVisible: false,
@@ -108,6 +130,69 @@ export default function AmitySocialUIKitV4Navigator() {
             },
           }}
         >
+          {/* --- Chat (PDT-3713) --- */}
+          <Stack.Screen
+            name="AmityChatHomePage"
+            component={AmityChatHomePage}
+          />
+          <Stack.Screen name="AmityChatPage" component={AmityChatPage} />
+          <Stack.Screen
+            name="AmityChannelCreateConversationPage"
+            component={AmityChannelCreateConversationPage}
+          />
+          <Stack.Screen
+            name="AmityGroupChatPage"
+            component={AmityGroupChatPage}
+          />
+          <Stack.Screen
+            name="AmitySelectGroupMemberPage"
+            component={AmitySelectGroupMemberPage}
+          />
+          <Stack.Screen
+            name="AmityCreateGroupChatPage"
+            component={AmityCreateGroupChatPage}
+          />
+          <Stack.Screen
+            name="AmityAddGroupMemberPage"
+            component={AmityAddGroupMemberPage}
+          />
+          <Stack.Screen
+            name="AmityGroupMemberListPage"
+            component={AmityGroupMemberListPage}
+          />
+          <Stack.Screen
+            name="AmityBannedGroupMemberListPage"
+            component={AmityBannedGroupMemberListPage}
+          />
+          <Stack.Screen
+            name="AmityGroupSettingPage"
+            component={AmityGroupSettingPage}
+          />
+          <Stack.Screen
+            name="AmityEditGroupProfilePage"
+            component={AmityEditGroupProfilePage}
+          />
+          <Stack.Screen
+            name="AmityEditGroupMemberPermissionsPage"
+            component={AmityEditGroupMemberPermissionsPage}
+          />
+          {/* --- Chat: M4 (search / archive / group notifications) --- */}
+          <Stack.Screen
+            name="AmitySearchChannelPage"
+            component={AmitySearchChannelPage}
+          />
+          <Stack.Screen
+            name="AmityArchivedChatPage"
+            component={AmityArchivedChatPage}
+          />
+          <Stack.Screen
+            name="AmityGroupNotificationPreferencePage"
+            component={AmityGroupNotificationPreferencePage}
+          />
+          <Stack.Screen
+            name="AmityEditGroupNotificationPage"
+            component={AmityEditGroupNotificationPage}
+          />
           {/* --- Social Home --- */}
           <Stack.Screen
             name="AmitySocialHomePage"

package/src/core/routes/RouteParamList.tsx

@@ -11,6 +11,25 @@ import {
 import { AmityPostCategory } from '../../social/enums/AmityPostContentComponentStyle';
 
 export type RootStackParamList = {
+  // --- Chat (PDT-3713) ---
+  AmityChatHomePage: undefined;
+  AmityChatPage: { channelId: string; userDisplayName?: string };
+  AmityChannelCreateConversationPage: undefined;
+  // --- Chat: group flows (PDT-3713 M3) ---
+  AmityGroupChatPage: { channelId: string; isJustCreated?: boolean };
+  AmitySelectGroupMemberPage: undefined;
+  AmityCreateGroupChatPage: { selectedUsers: Amity.User[] };
+  AmityAddGroupMemberPage: { channelId: string };
+  AmityGroupMemberListPage: { channelId: string };
+  AmityBannedGroupMemberListPage: { channelId: string };
+  AmityGroupSettingPage: { channelId: string };
+  AmityEditGroupProfilePage: { channelId: string };
+  AmityEditGroupMemberPermissionsPage: { channelId: string };
+  // --- Chat: M4 (search / archive / group notifications) ---
+  AmitySearchChannelPage: undefined;
+  AmityArchivedChatPage: undefined;
+  AmityGroupNotificationPreferencePage: { channelId: string };
+  AmityEditGroupNotificationPage: { channelId: string };
   AmitySocialHomePage: { postIdCallBack?: string };
   AmitySocialGlobalSearchPage: undefined;
   AmityMyCommunitiesSearchPage: undefined;

package/src/core/stores/slices/toastSlice.ts

@@ -7,6 +7,9 @@ type ToastState = {
   type: 'failed' | 'success' | 'informative' | 'loading';
   duration?: number;
   bottomPosition?: number;
+  // `custom` renders the dark pill used by chat notifications (bound to the
+  // CustomToast design tokens); `default` keeps the app-wide toast appearance.
+  variant?: 'default' | 'custom';
 };
 const initialState: ToastState = {
   visible: false,
@@ -14,6 +17,7 @@ const initialState: ToastState = {
   type: 'loading',
   duration: 2500,
   bottomPosition: 16,
+  variant: 'default',
 };
 
 const toastSlice = createSlice({
@@ -27,6 +31,7 @@ const toastSlice = createSlice({
       state.duration = action.payload.duration ?? initialState.duration;
       state.bottomPosition =
         action.payload.bottomPosition ?? initialState.bottomPosition;
+      state.variant = action.payload.variant ?? initialState.variant;
     },
     hideToast: (state) => {
       state.visible = false;
@@ -34,6 +39,7 @@ const toastSlice = createSlice({
       state.type = 'loading';
       state.duration = 2500;
       state.bottomPosition = 16;
+      state.variant = 'default';
     },
   },
 });

package/src/core/utils/abbreviateCount.ts

@@ -0,0 +1,13 @@
+// abbreviateCount — verbatim port of AmityUiKitWeb v4/utils/abbreviateCount.ts.
+// Kept separate from core/utils/number.ts `formatNumber` on purpose: web's
+// reaction UI uses THIS format ("1.0K"/"1.0M", no "B", no trailing-zero strip),
+// so matching web 1:1 requires the exact web function.
+export const abbreviateCount = (count: number): string | number => {
+  if (count >= 1000000) {
+    return (count / 1000000).toFixed(1) + 'M';
+  } else if (count >= 1000) {
+    return (count / 1000).toFixed(1) + 'K';
+  } else {
+    return count;
+  }
+};

package/src/index.tsx

@@ -3,6 +3,7 @@ import {
   AmityPageRenderer,
   AmityUiKitProvider,
   AmityUiKitSocial,
+  AmityUiKitChat,
   ErrorBoundary,
   navigate,
 } from './core';
@@ -106,6 +107,7 @@ export {
   AmityUiKitProvider,
   ErrorBoundary,
   AmityUiKitSocial,
+  AmityUiKitChat,
   AmityStoryTabComponent,
   AmityStoryTabComponentEnum,
   AmityCreateStoryPage,