@amityco/ui-kit-open-source 3.7.0 → 3.9.0

package/dist/index.d.mts

@@ -1,48 +1,165 @@
-import React, { ReactNode } from 'react';
-import { PostContentType } from '@amityco/ts-sdk';
+import React, { ReactNode, RefObject } from 'react';
 import * as styled_components_dist_types from 'styled-components/dist/types';
 import * as styled_components from 'styled-components';
 
-type CustomComponentName = 'Avatar' | 'CategoryHeader' | 'CategorySelector' | 'Chat' | 'ChatDetails' | 'ChatHeader' | 'ChatItem' | 'Comment' | 'CommentComposerBar' | 'CommentLikeButton' | 'CommunityCreatedModel' | 'CommunityCreationModal' | 'CommunityForm' | 'CommunityItem' | 'CommunityMembers' | 'CommunityName' | 'CommunityPermissions' | 'EmptyFeed' | 'EngagementBar' | 'Feed' | 'FeedHeaderTabs' | 'File' | 'Image' | 'ImageGallery' | 'Images' | 'Layout' | 'MediaGallery' | 'MenuTab' | 'Message' | 'MessageComposerBar' | 'MessageList' | 'Post' | 'PostLikeButton' | 'PostTargetSelector' | 'ProfileSettings' | 'ProfileSettingsTabs' | 'RecentChat' | 'SideNavBar' | 'SocialSearch' | 'Tabs' | 'UICategoryCard' | 'UICommunityCard' | 'UICommunityHeader' | 'UICommunityInfo' | 'UIEngagementBar' | 'UIPostHeader' | 'UITextContent' | 'UITrendingItem' | 'UIUserInfo' | 'UserChip' | 'UserHeader' | 'UserSelector';
-type CustomComponentType = Partial<Record<CustomComponentName, <TProps>(props: TProps) => React.ReactElement<TProps>>>;
+type AmityReactionType = {
+    name: string;
+    image: string;
+};
 
-type PostRendererProps = {
-    childrenPosts?: Amity.Post[];
-    className?: string;
-    currentUserId?: string;
-    handleDeletePost?: (postId: string) => void;
-    handleReportPost?: () => void;
-    handleUnreportPost?: () => void;
-    handleApprovePost?: () => void;
-    handleDeclinePost?: () => void;
-    handleClosePoll?: () => void;
-    poll?: Amity.Poll | null;
-    isPollClosed?: boolean;
-    hidePostTarget?: boolean;
-    isFlaggedByMe?: boolean;
-    readonly?: boolean;
-    post?: Amity.Post;
-    user?: Amity.User | null;
-    userRoles?: string[];
-    loading?: boolean;
-    avatarFileUrl?: string;
+type ThemeValue = {
+    primary_color: string;
+    secondary_color: string;
+    secondary_shade1_color: string;
+    secondary_shade2_color: string;
+    secondary_shade3_color: string;
+    secondary_shade4_color: string;
+    base_color: string;
+    base_shade1_color: string;
+    base_shade2_color: string;
+    base_shade3_color: string;
+    base_shade4_color: string;
+    base_shade5_color: string;
+    alert_color: string;
+    background_color: string;
+    base_inverse_color: string;
+};
+type Theme = {
+    light: ThemeValue;
+    dark: ThemeValue;
+};
+type ThemeConfiguration = {
+    preferred_theme?: 'light' | 'dark' | 'default';
+    theme?: {
+        light?: Partial<Theme['light']>;
+        dark?: Partial<Theme['dark']>;
+    };
+};
+interface Config {
+    preferred_theme?: 'light' | 'dark' | 'default';
+    theme?: {
+        light?: Theme['light'];
+        dark?: Theme['dark'];
+    };
+    excludes?: string[];
+    message_reactions?: AmityReactionType[];
+    customizations?: {
+        [key: string]: IconConfiguration & TextConfiguration & ThemeConfiguration & CustomConfiguration;
+    };
+}
+type IconConfiguration = {
+    icon?: string;
+    image?: string;
+};
+type TextConfiguration = {
+    text?: string;
+};
+type CustomConfiguration = {
+    [key: string]: string | undefined | boolean | Array<string> | number | Record<string, unknown>;
 };
-type PostRendererConfigType = Record<ValueOf<typeof PostContentType> | string, (props: PostRendererProps) => ReactNode>;
 
-interface UiKitProviderProps {
+declare enum Mode {
+    CREATE = "create",
+    EDIT = "edit"
+}
+interface AmityPostComposerEditOptions {
+    mode: Mode.EDIT;
+    post: Amity.Post;
+}
+interface AmityPostComposerCreateOptions {
+    mode: Mode.CREATE;
+    targetId: string | null;
+    targetType: 'community' | 'user';
+    community?: Amity.Community;
+}
+type PostComposerPageProps = AmityPostComposerCreateOptions | AmityPostComposerEditOptions;
+declare function PostComposerPage(props: PostComposerPageProps): React.JSX.Element;
+
+interface PageBehavior {
+    AmityStoryViewPageBehavior?: {
+        onCloseAction?(): void;
+        hyperLinkAction?(context: Record<string, unknown>): void;
+    };
+    AmityDraftStoryPageBehavior?: {
+        onCloseAction?(): void;
+    };
+    onClickHyperLink?(): void;
+    AmitySocialHomePageBehavior?: Record<string, unknown>;
+    AmityGlobalFeedComponentBehavior?: {
+        goToPostDetailPage?: (context: {
+            postId: string;
+        }) => void;
+        goToViewStoryPage?: (context: {
+            targetId: string;
+            targetType: Amity.StoryTargetType;
+            storyType: 'communityFeed' | 'globalFeed';
+            targetIds?: string[];
+        }) => void;
+    };
+    AmityPostDetailPageBehavior?: Record<string, unknown>;
+    AmityPostContentComponentBehavior?: {
+        goToCommunityProfilePage?: (context: {
+            communityId: string;
+        }) => void;
+        goToUserProfilePage?: (context: {
+            userId: string;
+        }) => void;
+        goToPostComposerPage?: (context: {
+            mode: Mode.EDIT;
+            post: Amity.Post;
+        }) => void;
+    };
+    AmitySocialGlobalSearchPageBehavior?: Record<string, unknown>;
+    AmityCommunitySearchResultComponentBehavior?: {
+        goToCommunityProfilePage?: (context: {
+            communityId: string;
+        }) => void;
+    };
+    AmityCreatePostMenuComponentBehavior?: {
+        goToSelectPostTargetPage?(): void;
+        goToStoryTargetSelectionPage?(): void;
+    };
+    AmityPostTargetSelectionPage?: {
+        goToPostComposerPage?: (context: {
+            mode: Mode.CREATE;
+            targetId: string | null;
+            targetType: 'community' | 'user';
+            community?: Amity.Community;
+        }) => void;
+    };
+    AmityStoryTargetSelectionPage?: {
+        goToStoryCreationPage?(context: {
+            targetId: string | null;
+            targetType: Amity.StoryTargetType;
+            mediaType: {
+                type: 'image';
+                url: string;
+            } | {
+                type: 'video';
+                url: string;
+            };
+            storyType: 'communityFeed' | 'globalFeed';
+        }): void;
+    };
+    AmityPostComposerPageBehavior?: {
+        goToSocialHomePage?(): void;
+    };
+}
+
+type AmityUIKitConfig = Config;
+interface AmityUIKitProviderProps {
     apiKey: string;
     apiRegion: string;
     apiEndpoint?: {
         http?: string;
         mqtt?: string;
     };
-    authToken?: string;
     userId: string;
     displayName: string;
-    customComponents?: CustomComponentType;
-    postRendererConfig?: PostRendererConfigType;
+    postRendererConfig?: any;
     theme?: Record<string, unknown>;
     children?: React.ReactNode;
+    socialCommunityCreationButtonVisible?: boolean;
     actionHandlers?: {
         onChangePage?: (data: {
             type: string;
@@ -57,16 +174,15 @@ interface UiKitProviderProps {
         }) => void;
         onEditUser?: (userId: string) => void;
         onMessageUser?: (userId: string) => void;
-        onBack?: () => void;
     };
-    socialCommunityCreationButtonVisible?: boolean;
+    pageBehavior?: PageBehavior;
     onConnectionStatusChange?: (state: Amity.SessionStates) => void;
     onConnected?: () => void;
     onDisconnected?: () => void;
-    pageBehavior?: Record<string, unknown>;
     getAuthToken?: () => Promise<string>;
+    configs?: AmityUIKitConfig;
 }
-declare const UiKitProvider: ({ apiKey, apiRegion, apiEndpoint, userId, displayName, customComponents, postRendererConfig, theme, children, socialCommunityCreationButtonVisible, actionHandlers, onConnectionStatusChange, onDisconnected, getAuthToken, }: UiKitProviderProps) => React.JSX.Element;
+declare const AmityUIKitProvider: React.FC<AmityUIKitProviderProps>;
 
 interface FeedProps {
     className?: string;
@@ -125,7 +241,6 @@ type AmityDraftStoryPageProps = {
     targetId: string;
     targetType: Amity.StoryTargetType;
     mediaType?: AmityStoryMediaType$1;
-    storyType: 'communityFeed' | 'globalFeed';
 };
 declare const AmityDraftStoryPage: (props: AmityDraftStoryPageProps) => React.JSX.Element;
 
@@ -281,11 +396,12 @@ declare class AmityUIKitManager {
      * @param userId - The user ID to be used for login.
      * @param displayName - The display name of the user.
      * @param sessionHandler - The session handler for access token renewal.
+     * @param authToken - The authentication token to be used for login.
      * @param onConnectionStatusChange - The callback function for connection status changes.
      * @param onConnected - The callback function to be called when connected.
      * @param onDisconnected - The callback function to be called when disconnected.
      */
-    static registerDevice(userId: string, displayName: string, sessionHandler: SessionHandler, onConnectionStatusChange?: (state: Amity.SessionStates) => void, onConnected?: () => void, onDisconnected?: () => void): Promise<void>;
+    static registerDevice(userId: string, displayName: string, sessionHandler: SessionHandler, authToken?: string, onConnectionStatusChange?: (state: Amity.SessionStates) => void, onConnected?: () => void, onDisconnected?: () => void): Promise<void>;
     /**
      * Sets the AmityClient instance to be used by the AmityUIKitManager.
      * This method is useful when sharing the AmityClient instance between different parts of the application.
@@ -315,13 +431,6 @@ declare class AmityUIKitManager {
     isClientConnected(): boolean;
 }
 
-type ViewStoryPageType = 'communityFeed' | 'globalFeed';
-interface AmityViewStoryPageProps {
-    type: ViewStoryPageType;
-    targetId: string;
-}
-declare const ViewStoryPage: React.FC<AmityViewStoryPageProps>;
-
 interface CommentTrayProps {
     referenceType: Amity.CommentReferenceType;
     referenceId: string;
@@ -344,13 +453,168 @@ interface ReactionListProps {
     referenceType: Amity.ReactableType;
 }
 
-type StoryTabType = 'communityFeed' | 'globalFeed';
-type StoryTabProps<T extends StoryTabType> = {
+type StoryTabProps = ({
+    type: 'communityFeed';
+    communityId: string;
+} | {
+    type: 'globalFeed';
+}) & {
+    pageId?: string;
+};
+declare const StoryTab: React.FC<StoryTabProps>;
+
+interface CreatePostMenuProps {
+    pageId: string;
+}
+declare function CreatePostMenu({ pageId }: CreatePostMenuProps): React.JSX.Element;
+
+interface MediaAttachmentProps {
+    pageId: string;
+    uploadLoading?: boolean;
+    isVisibleCamera: boolean;
+    isVisibleImage: boolean;
+    isVisibleVideo: boolean;
+    onVideoFileChange?: (files: File[]) => void;
+    onImageFileChange?: (files: File[]) => void;
+}
+declare function MediaAttachment({ pageId, isVisibleCamera, isVisibleImage, isVisibleVideo, onVideoFileChange, onImageFileChange, }: MediaAttachmentProps): React.JSX.Element | null;
+
+interface DetailedMediaAttachmentProps {
+    pageId: string;
+    isVisibleCamera: boolean;
+    isVisibleImage: boolean;
+    isVisibleVideo: boolean;
+    onVideoFileChange?: (files: File[]) => void;
+    onImageFileChange?: (files: File[]) => void;
+}
+declare function DetailedMediaAttachment({ pageId, isVisibleCamera, isVisibleImage, isVisibleVideo, onVideoFileChange, onImageFileChange, }: DetailedMediaAttachmentProps): React.JSX.Element | null;
+
+interface UserSearchResultProps {
+    pageId?: string;
+    userCollection: Amity.User[];
+    isLoading: boolean;
+    onLoadMore: () => void;
+}
+declare const UserSearchResult: ({ pageId, userCollection, isLoading, onLoadMore, }: UserSearchResultProps) => React.JSX.Element;
+
+interface CommunitySearchResultProps {
+    pageId?: string;
+    communityCollection: Amity.Community[];
+    isLoading: boolean;
+    onLoadMore: () => void;
+}
+declare const CommunitySearchResult: ({ pageId, communityCollection, isLoading, onLoadMore, }: CommunitySearchResultProps) => React.JSX.Element;
+
+interface TopSearchBarProps {
+    pageId?: string;
+    search: (keyword: string) => void;
+}
+declare function TopSearchBar({ pageId, search }: TopSearchBarProps): React.JSX.Element | null;
+
+interface PostContentProps {
+    pageId?: string;
+    post: Amity.Post;
+    type: 'feed' | 'detail';
+    drawerRef?: React.RefObject<HTMLDivElement>;
+    onClick?: () => void;
+    onPostDeleted?: (post: Amity.Post) => void;
+}
+declare const PostContent: ({ pageId, post: initialPost, type, drawerRef, onClick, onPostDeleted, }: PostContentProps) => React.JSX.Element;
+
+interface MyCommunitiesProps {
+    pageId?: string;
+}
+declare const MyCommunities: ({ pageId }: MyCommunitiesProps) => React.JSX.Element;
+
+interface GlobalFeedProps {
+    pageId?: string;
+    componentId?: string;
+    items: Array<Amity.Post | Amity.Ad>;
+    isLoading: boolean;
+    onFeedReachBottom: () => void;
+    onPostDeleted?: (post: Amity.Post) => void;
+}
+declare const GlobalFeed: ({ pageId, componentId, items, isLoading, onFeedReachBottom, onPostDeleted, }: GlobalFeedProps) => React.JSX.Element;
+
+interface EmptyNewsfeedProps {
+    pageId?: string;
+}
+declare function EmptyNewsfeed({ pageId }: EmptyNewsfeedProps): React.JSX.Element | null;
+
+interface NewsfeedProps {
     pageId?: string;
-    type: T;
-    communityId?: T extends 'communityFeed' ? string : never;
+}
+declare const Newsfeed: ({ pageId }: NewsfeedProps) => React.JSX.Element;
+
+declare enum HomePageTab {
+    Newsfeed = "Newsfeed",
+    Explore = "Explore",
+    MyCommunities = "My communities"
+}
+declare function SocialHomePage(): React.JSX.Element;
+
+interface TopNavigationProps {
+    pageId?: string;
+    selectedTab?: HomePageTab;
+    onClickPostCreationButton?: () => void;
+}
+declare function TopNavigation({ pageId, selectedTab, onClickPostCreationButton, }: TopNavigationProps): React.JSX.Element | null;
+
+interface ChatHeaderProps {
+    channel: Amity.Channel | null;
+    pageId?: string;
+    componentId?: string;
+}
+declare const ChatHeader: ({ channel, pageId }: ChatHeaderProps) => React.JSX.Element;
+
+interface AmityLiveChatMessageListProps {
+    pageId?: string;
+    channel: Amity.Channel;
+    replyMessage: (message: Amity.Message<'text'>) => void;
+}
+declare const MessageList: ({ pageId, channel, replyMessage, }: AmityLiveChatMessageListProps) => React.JSX.Element;
+
+type ComposeActionTypes = {
+    replyMessage?: Amity.Message;
+    mentionMessage?: Amity.Message;
+    clearReplyMessage?: () => void;
+    clearMention?: () => void;
+};
+interface MessageComposerProps {
+    channel: Amity.Channel;
+    composeAction: ComposeActionTypes;
+    suggestionRef?: RefObject<HTMLDivElement>;
+    disabled?: boolean;
+    pageId?: string;
+}
+declare const MessageComposer: ({ pageId, channel, composeAction: { replyMessage, mentionMessage, clearReplyMessage, clearMention }, }: MessageComposerProps) => React.JSX.Element;
+
+declare const MessageReactionPreview: ({ message, onClick, }: {
+    message: Amity.Message;
+    onClick?: (() => void) | undefined;
+}) => React.JSX.Element | null;
+
+declare const MessageReactionPicker: ({ message, onSelectReaction, }: {
+    message: Amity.Message;
+    onSelectReaction: (reactionName: string) => void;
+}) => React.JSX.Element | null;
+
+interface MessageQuickReactionProps {
+    pageId?: string;
+    componentId?: string;
+    message: Amity.Message;
+    onSelectReaction?: () => void;
+}
+declare const MessageQuickReaction: ({ pageId, componentId, message, onSelectReaction, }: MessageQuickReactionProps) => React.JSX.Element;
+
+type MessageActionType = {
+    onCopy?: () => void;
+    onFlag?: () => void;
+    onUnflag?: () => void;
+    onDelete?: () => void;
+    onReply?: () => void;
+    onMention?: () => void;
 };
-declare const StoryTab: <T extends StoryTabType>({ pageId, type, communityId, }: StoryTabProps<T>) => React.JSX.Element | null;
 
 type AmityStoryMediaType = {
     type: 'image';
@@ -361,8 +625,9 @@ type AmityStoryMediaType = {
 };
 type StoryPreviewProps = {
     mediaType?: AmityStoryMediaType;
-    file?: File | null;
     imageMode: 'fit' | 'fill';
+    width?: number;
+    height?: number;
     hyperLink: {
         data: {
             url: string;
@@ -372,7 +637,6 @@ type StoryPreviewProps = {
     }[];
     onPlay?: () => void;
     onPause?: () => void;
-    onComplete?: () => void;
     avatar: string;
     title: string;
     description: string;
@@ -381,4 +645,41 @@ type StoryPreviewProps = {
 };
 declare const StoryPreview: React.FC<StoryPreviewProps>;
 
-export { _default$1 as AmityAvatar, CommentTray as AmityCommentTrayComponent, AmityDraftStoryPage, CommentText as AmityExpandableText, PostContainer as AmityPostContainer, _default as AmityPostEngagementBar, ReactionList as AmityReactionList, type ReactionListProps as AmityReactionListProps, StoryPreview as AmityStoryPreview, StoryTab as AmityStoryTabComponent, AmityUIKitManager, ChatApplication as AmityUiKitChat, _default$2 as AmityUiKitFeed, UiKitProvider as AmityUiKitProvider, Community as AmityUiKitSocial, ViewStoryPage as AmityViewStoryPage, addChatMembers as amityAddChatMembers, removeChatMembers as amityRemoveChatMembers, useNavigation as useAmityNavigation, useSDK as useAmitySDK, useUser as useAmityUser };
+type StoryPreviewThumbnailProps = {
+    thumbnailUrl?: string;
+    hyperLink: {
+        data: {
+            url: string;
+            customText: string;
+        };
+        type: Amity.StoryItemType;
+    }[];
+    avatar: string;
+    title: string;
+    isOfficial?: boolean;
+    onClick?: () => void;
+    imageMode?: 'fit' | 'fill';
+};
+declare const StoryPreviewThumbnail: React.FC<StoryPreviewThumbnailProps>;
+
+type ViewStoryPageType = 'communityFeed' | 'globalFeed';
+interface AmityViewStoryPageProps {
+    type: ViewStoryPageType;
+    targetId: string;
+}
+declare const ViewStoryPage: React.FC<AmityViewStoryPageProps>;
+
+declare function StoryTargetSelectionPage(): React.JSX.Element;
+
+declare function SelectPostTargetPage(): React.JSX.Element;
+
+declare function MyCommunitiesSearchPage(): React.JSX.Element;
+
+declare function SocialGlobalSearchPage(): React.JSX.Element;
+
+interface PostDetailPageProps {
+    id: string;
+}
+declare function PostDetailPage({ id }: PostDetailPageProps): React.JSX.Element;
+
+export { _default$1 as AmityAvatar, CommentTray as AmityCommentTrayComponent, CommunitySearchResult as AmityCommunitySearchResultComponent, CreatePostMenu as AmityCreatePostMenuComponent, DetailedMediaAttachment as AmityDetailedMediaAttachmentComponent, AmityDraftStoryPage, EmptyNewsfeed as AmityEmptyNewsFeedComponent, CommentText as AmityExpandableText, GlobalFeed as AmityGlobalFeedComponent, ChatHeader as AmityLiveChatHeader, MessageComposer as AmityLiveChatMessageComposeBar, MessageList as AmityLiveChatMessageList, MessageQuickReaction as AmityLiveChatMessageQuickReaction, MessageReactionPicker as AmityLiveChatMessageReactionPicker, MessageReactionPreview as AmityLiveChatMessageReactionPreview, MediaAttachment as AmityMediaAttachmentComponent, type MessageActionType as AmityMessageActionType, MyCommunities as AmityMyCommunitiesComponent, MyCommunitiesSearchPage as AmityMyCommunitiesSearchPage, Newsfeed as AmityNewsFeedComponent, PostComposerPage as AmityPostComposerPage, PostContainer as AmityPostContainer, PostContent as AmityPostContentComponent, PostDetailPage as AmityPostDetailPage, _default as AmityPostEngagementBar, SelectPostTargetPage as AmityPostTargetSelectionPage, ReactionList as AmityReactionListComponent, type ReactionListProps as AmityReactionListProps, SocialGlobalSearchPage as AmitySocialGlobalSearchPage, SocialHomePage as AmitySocialHomePage, HomePageTab as AmitySocialHomePageTab, TopNavigation as AmitySocialHomeTopNavigationComponent, StoryPreview as AmityStoryPreview, StoryPreviewThumbnail as AmityStoryPreviewThumbnail, StoryTab as AmityStoryTabComponent, StoryTargetSelectionPage as AmityStoryTargetSelectionPage, TopSearchBar as AmityTopSearchBarComponent, AmityUIKitManager, ChatApplication as AmityUiKitChat, _default$2 as AmityUiKitFeed, AmityUIKitProvider as AmityUiKitProvider, Community as AmityUiKitSocial, UserSearchResult as AmityUserSearchResultComponent, ViewStoryPage as AmityViewStoryPage, addChatMembers as amityAddChatMembers, removeChatMembers as amityRemoveChatMembers, useNavigation as useAmityNavigation, useSDK as useAmitySDK, useUser as useAmityUser };