quickblox-react-ui-kit 0.3.0-beta.1 → 0.3.0-beta.3

package/.storybook/main.ts

@@ -0,0 +1,26 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/preset-create-react-app',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+    '@storybook/addon-viewport'
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {
+      builder: {
+        useSWC: true,
+      },
+    },
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  staticDirs: ['../public'],
+};
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,16 @@
+import type { Preview } from '@storybook/react';
+import '../src/index.scss';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package/README.md

@@ -14,6 +14,8 @@ The main goal of the QuickBlox UIKit for React is to offer developers a streamli
 
 The QuickBlox UIKit for React offers modules that encapsulate complex chat functionalities, such as dialogs and chat management and real-time updates. These modules provide a simplified interface for integrating chat features into applications without the need for extensive knowledge of the underlying protocols or server-side infrastructure.
 
+You can view and interact with the interface components of the UI Kit using Storybook. In fact, this provides an interactive environment showcasing different scenarios that UI components might encounter in a live application. To view these, visit our [documentation](https://quickblox.github.io/react-ui-kit/).
+
 # Screenshots
 
 Chat dashboard with list of dialogs and create new chat dialog;
@@ -291,8 +293,10 @@ and specify selected components:
 />
 ```
 # Sample
-
+The source code of the sample is available on GitHub:
 https://github.com/QuickBlox/quickblox-javascript-sdk/tree/gh-pages/samples/react-chat-ui-kit-init-sample
+You can view and interact with the interface components of the UI Kit using Storybook. In fact, this provides an interactive environment showcasing different scenarios that UI components might encounter in a live application. To view these, visit our [documentation](https://quickblox.github.io/react-ui-kit/).
+
 ## Video guide "How to use AI Feature"
 [Youtube video about AI Assistant](https://youtu.be/BneMtDagOy4)
 # License

package/dist/Data/repository/DialogsRepository.d.ts

@@ -18,6 +18,7 @@ export default class DialogsRepository implements IDialogsRepository {
     saveDialogToLocal(entity: DialogEntity): Promise<boolean>;
     createDialogInRemote(entity: DialogEntity): Promise<DialogEntity>;
     updateDialogInLocal(entity: DialogEntity): Promise<DialogEntity>;
+    updateCurrentDialogInLocalDataSource(entity: DialogEntity): Promise<DialogEntity>;
     updateDialogInRemote(entity: DialogEntity): Promise<DialogEntity>;
     getDialogFromLocal(dialogId: string): Promise<DialogEntity>;
     getDialogFromRemote(dialogId: string): Promise<DialogEntity>;

package/dist/Data/source/remote/IRemoteDataSource.d.ts

@@ -33,4 +33,5 @@ export interface IRemoteDataSource extends IRemoteMessaging<RemoteMessageDTO> {
     getFile(dto: RemoteFileDTO): Promise<RemoteFileDTO>;
     deleteFile(dto: RemoteFileDTO): Promise<void>;
     subscribeToChatConnectionEvents(fileId: string): Promise<void>;
+    updateCurrentDialog(dto: RemoteDialogDTO): void;
 }

package/dist/Data/source/remote/RemoteDataSource.d.ts

@@ -41,8 +41,10 @@ export declare class RemoteDataSource implements IRemoteDataSource {
     private _authInformation;
     get authInformation(): AuthorizationData | undefined;
     set authInformation(value: AuthorizationData | undefined);
+    private currentDialog;
     getCurrentDialogDTOMapper(): IDTOMapper;
     constructor();
+    updateCurrentDialog(dto: RemoteDialogDTO): void;
     setUpMockStorage(): Promise<void>;
     private createUserSession;
     static initSDK(sdkParams: QBInitParams): boolean;

package/dist/Domain/entity/DialogEventInfo.d.ts

@@ -1,14 +1,18 @@
 import EventMessageType from './EventMessageType';
 import { NotificationTypes } from './NotificationTypes';
 import { MessageEntity } from './MessageEntity';
+import { DialogEntity } from './DialogEntity';
 export type MessageStatus = {
+    deliveryStatus: 'delivered' | 'read' | 'sent' | 'sending';
     isTyping: boolean;
     userId: number;
     dialogId: string;
+    messageId: string;
 };
 export type DialogEventInfo = {
     eventMessageType: EventMessageType;
     notificationTypes: NotificationTypes | undefined;
+    dialogInfo?: DialogEntity | undefined;
     messageInfo: MessageEntity | undefined;
     messageStatus: MessageStatus | undefined;
 };

package/dist/Domain/use_cases/GetAllMessagesForDialog.d.ts

@@ -1,11 +1,11 @@
 import { IUseCase } from './base/IUseCase';
 import { MessageEntity } from '../entity/MessageEntity';
 import { IMessagesRepository } from '../repository/IMessagesRepository';
-import { Pagination } from '../repository/Pagination';
-export declare class GetAllMessagesForDialogMock implements IUseCase<void, Array<MessageEntity>> {
+import { PaginatedResult, Pagination } from '../repository/Pagination';
+export declare class GetAllMessagesForDialogMock implements IUseCase<void, PaginatedResult<MessageEntity>> {
     private messagesRepository;
     private readonly dialogId;
     private currentPagination;
     constructor(messagesRepository: IMessagesRepository, dialogId: string, currentPagination: Pagination);
-    execute(): Promise<Array<MessageEntity>>;
+    execute(): Promise<PaginatedResult<MessageEntity>>;
 }

package/dist/Domain/use_cases/UpdateCurrentDialogInDataSourceUseCase.d.ts

@@ -0,0 +1,10 @@
+import { DialogEntity } from '../entity/DialogEntity';
+import DialogsRepository from '../../Data/repository/DialogsRepository';
+import { IUseCase } from './base/IUseCase';
+import { GroupDialogEntity } from '../entity/GroupDialogEntity';
+export declare class UpdateCurrentDialogInDataSourceUseCase implements IUseCase<void, DialogEntity> {
+    private dialogRepository;
+    private updateDialog;
+    constructor(dialogRepository: DialogsRepository, updateDialog: GroupDialogEntity);
+    execute(): Promise<DialogEntity>;
+}

package/dist/Presentation/Views/Dialog/AIComponents/AIAssist/AIAssist.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { AIMessageWidget } from '../../AIWidgets/AIMessageWidget';
+import { MessageEntity } from '../../../../../Domain/entity/MessageEntity';
+import './AIAssist.scss';
+interface AIAssistProps {
+    loading?: boolean;
+    AIAssistWidget: AIMessageWidget;
+    maxTokens?: number;
+    onLoading: (isLoading: boolean, id: string) => void;
+    onError: (messageError: string) => void;
+    messageToAssist?: MessageEntity;
+    messageHistory?: MessageEntity[];
+    currentUserId?: number;
+}
+export default function AIAssist({ loading, AIAssistWidget, maxTokens, onLoading, onError, messageToAssist, messageHistory, currentUserId, }: AIAssistProps): JSX.Element;
+export {};

package/dist/Presentation/Views/Dialog/AIComponents/AITranslate/AITranslate.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { MessageEntity } from '../../../../../Domain/entity/MessageEntity';
+import { AIMessageWidget } from '../../AIWidgets/AIMessageWidget';
+import './AITranslate.scss';
+interface AITranslateComponentProps {
+    AITranslateWidget: AIMessageWidget;
+    originalTextMessage: boolean;
+    loading?: boolean;
+    defaultLanguage: string;
+    languages: string[];
+    maxTokens?: number;
+    onLoading: (isLoading: boolean, id: string) => void;
+    onError: (messageError: string) => void;
+    onTranslated: (id: string, textTranslated: string) => void;
+    messageToTranslate?: MessageEntity;
+    messageHistory?: MessageEntity[];
+    currentUserId?: number;
+}
+export default function AITranslate({ AITranslateWidget, originalTextMessage, loading, defaultLanguage, languages, maxTokens, onLoading, onError, onTranslated, messageToTranslate, messageHistory, currentUserId, }: AITranslateComponentProps): JSX.Element;
+export {};

package/dist/Presentation/Views/Dialog/DialogViewModel.d.ts

@@ -1,9 +1,11 @@
 import BaseViewModel, { FunctionTypeFileToToBoolean, FunctionTypeForwardMessagesParamsToBoolean, FunctionTypePaginationToVoid, FunctionTypeReplyMessagesParamsToBoolean, FunctionTypeStringToVoid, FunctionTypeVoidToVoid } from '../../../CommonTypes/BaseViewModel';
 import { MessageEntity } from '../../../Domain/entity/MessageEntity';
 import { DialogEntity } from '../../../Domain/entity/DialogEntity';
+import { Pagination } from '../../../Domain/repository/Pagination';
 export interface DialogViewModel extends BaseViewModel<DialogEntity> {
     loading: boolean;
     error: string;
+    pagination: Pagination;
     messages: MessageEntity[];
     getMessages: FunctionTypePaginationToVoid;
     sendTextMessage: FunctionTypeStringToVoid;

package/dist/Presentation/Views/Dialog/MessageItem/MessageItem.d.ts

@@ -0,0 +1,22 @@
+import { RefObject } from 'react';
+import { MessageEntity } from '../../../../Domain/entity/MessageEntity';
+import { FunctionTypeMessageEntityToVoid } from '../../../../CommonTypes/BaseViewModel';
+import { AIMessageWidget } from '../AIWidgets/AIMessageWidget';
+import './MessageItem.scss';
+export type MessageItemProps = {
+    message: MessageEntity;
+    currentUserId?: number;
+    AITranslateWidget?: AIMessageWidget;
+    AIAssistWidget?: AIMessageWidget;
+    maxTokens: number;
+    defaultTranslationLanguage: string;
+    languagesForAITranslate: string[];
+    enableForwarding: boolean;
+    enableReplying: boolean;
+    onReply: FunctionTypeMessageEntityToVoid;
+    onForward: FunctionTypeMessageEntityToVoid;
+    listRef?: RefObject<HTMLDivElement>;
+    messagesToView: MessageEntity[];
+    onError: (messageError: string) => void;
+};
+export default function MessageItem({ message, currentUserId, enableForwarding, enableReplying, onReply, onForward, listRef, messagesToView, AITranslateWidget, AIAssistWidget, maxTokens, defaultTranslationLanguage, languagesForAITranslate, onError, }: MessageItemProps): JSX.Element | null;

package/dist/Presentation/Views/DialogInfo/DialogInfo.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import './DialogInfo.scss';
 import { DialogEntity } from '../../../Domain/entity/DialogEntity';
-import { FunctionTypeBooleanToVoid, FunctionTypeDialogEntityToVoid, FunctionTypeVoidToVoid } from '../../../CommonTypes/BaseViewModel';
+import { FunctionTypeBooleanToVoid, FunctionTypeVoidToVoid } from '../../../CommonTypes/BaseViewModel';
 import { DialogListViewModel } from '../DialogList/DialogListViewModel';
 import UiKitTheme from '../../themes/UiKitTheme';
 import { UserEntity } from '../../../Domain/entity/UserEntity';
@@ -9,7 +9,6 @@ type HeaderDialogsProps = {
     dialog: DialogEntity;
     dialogViewModel: DialogListViewModel;
     onCloseDialogInformationHandler: FunctionTypeVoidToVoid;
-    onLeaveDialog: FunctionTypeDialogEntityToVoid;
     onShowAllMemberClick: FunctionTypeBooleanToVoid;
     users: UserEntity[];
     theme?: UiKitTheme;

package/dist/Presentation/Views/DialogList/DialogList.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FunctionTypeDialogEntityToVoid, FunctionTypeViewModelToVoid } from '../../../CommonTypes/BaseViewModel';
+import { FunctionTypeDialogEntityToVoid, FunctionTypeViewModelToVoid, FunctionTypeVoidToVoid } from '../../../CommonTypes/BaseViewModel';
 import { ThemeNames } from '../PreviewDialog/PreviewDialog';
 import { DialogListViewModel } from './DialogListViewModel';
 import { DialogEntity } from '../../../Domain/entity/DialogEntity';
@@ -19,9 +19,11 @@ type DialogsProps = {
     header?: React.ReactNode;
     subHeaderContent?: React.ReactNode;
     upHeaderContent?: React.ReactNode;
-    onDialogSelectHandler?: FunctionTypeViewModelToVoid<DialogEntity>;
+    selectedDialog?: DialogEntity;
+    onDialogSelected?: FunctionTypeViewModelToVoid<DialogEntity>;
     onLeaveDialog: FunctionTypeDialogEntityToVoid;
-    dialogsViewModel: DialogListViewModel;
+    onCreateDialog?: FunctionTypeVoidToVoid;
+    dialogListViewModel: DialogListViewModel;
     additionalSettings?: DialogsComponentSettings;
     scrollableHeight?: number;
 };

package/dist/Presentation/Views/Flow/CreateDialogFlow/CreateNewDialogFlow.d.ts

@@ -1,7 +1,10 @@
 import React from 'react';
 import { DialogListViewModel } from '../../DialogList/DialogListViewModel';
+import { DialogEntity } from '../../../../Domain/entity/DialogEntity';
 type CreateNewDialogFlowProps = {
     dialogsViewModel: DialogListViewModel;
+    onFinished: (newEntity: DialogEntity) => void;
+    onCancel?: () => void;
 };
 declare const CreateNewDialogFlow: React.FC<CreateNewDialogFlowProps>;
 export default CreateNewDialogFlow;

package/dist/Presentation/Views/YesNoQuestion/YesNoQuestion.d.ts

@@ -5,7 +5,6 @@ type YesNoQuestionProps = {
     messageText?: string;
     onClickYesAction?: FunctionTypeVoidToVoid;
     OnTouchYesAction?: FunctionTypeVoidToVoid;
-    onClickNoAction?: FunctionTypeVoidToVoid;
     onTouchNoAction?: FunctionTypeVoidToVoid;
     yesActionCaption?: string;
     noActionCaption?: string;

package/dist/Presentation/ui-components/Message/Message.d.ts

@@ -7,9 +7,9 @@ export type MessageProps = {
     type: 'outgoing' | 'incoming';
     subtype?: 'reply' | 'forward';
     status?: 'sent' | 'delivered' | 'viewed' | 'error';
-    enableSelect: boolean;
-    isSelect: boolean;
-    disabled: boolean;
+    enableSelect?: boolean;
+    isSelect?: boolean;
+    disabled?: boolean;
     onSelect?: (isSelected: boolean) => void;
     bottomPart?: ReactElement;
     additionalPart?: ReactElement;

package/dist/Presentation/ui-components/Message/Message.stories.d.ts

@@ -6,4 +6,3 @@ type Story = StoryObj<typeof meta>;
 export declare const MessageText: Story;
 export declare const MessageImage: Story;
 export declare const MessageFile: Story;
-export declare const MessageTextWithAIfeatures: Story;

package/dist/Presentation/ui-components/MessageInput/MessageInput.stories.d.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import MessageInput from './MessageInput';
 declare const meta: Meta<typeof MessageInput>;
 export default meta;
-export declare const Default: StoryObj<typeof MessageInput>;
-export declare const WithVoiceMessage: StoryObj<typeof MessageInput>;
-export declare const WithPreview: StoryObj<typeof MessageInput>;
-export declare const LoadingState: StoryObj<typeof MessageInput>;
+export declare const MessageInputDefault: StoryObj<typeof MessageInput>;
+export declare const MessageInputWithVoiceMessage: StoryObj<typeof MessageInput>;
+export declare const MessageInputWithPreview: StoryObj<typeof MessageInput>;
+export declare const MessageInputLoadingState: StoryObj<typeof MessageInput>;

package/dist/Presentation/ui-components/Placeholder/Placeholder.d.ts

@@ -1,8 +1,8 @@
 import { ReactElement } from 'react';
 import './Placeholder.scss';
 interface PlaceholderProps {
-    icon: ReactElement;
-    text: string;
+    icon?: ReactElement;
+    text: string | string[];
     onRetry?: VoidFunction;
     className?: string;
 }

package/dist/Presentation/ui-components/UserListItem/UserListItem.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import './UserListItem.scss';
+export interface UserListItemProps {
+    userName: string;
+    avatarUrl?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    onChange?: (checked: boolean) => void;
+    className?: string;
+}
+export default function UserListItem({ avatarUrl, userName, checked, disabled, onChange, className, }: UserListItemProps): JSX.Element;

package/dist/Presentation/ui-components/UserListItem/UserListItem.stories.d.ts

@@ -0,0 +1,86 @@
+import type { StoryObj } from '@storybook/react';
+import UserListItem from './UserListItem';
+declare const meta: {
+    title: string;
+    component: typeof UserListItem;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    args: {
+        className: string;
+        disabled: false;
+        checked: false;
+        userName: string;
+        avatarUrl: string;
+    };
+    argTypes: {
+        avatarUrl: {
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            description: string;
+        };
+        userName: {
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            description: string;
+        };
+        disabled: {
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            description: string;
+        };
+        checked: {
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            description: string;
+        };
+        onChange: {
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+                type: {
+                    summary: string;
+                };
+            };
+            description: string;
+        };
+        className: {
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+                type: {
+                    summary: string;
+                };
+            };
+            description: string;
+        };
+    };
+};
+export default meta;
+type StoryDefault = StoryObj<typeof meta>;
+export declare const UserListItemDefault: StoryDefault;
+export declare const UserList: StoryDefault;

package/dist/Presentation/ui-components/index.d.ts

@@ -1,13 +1,19 @@
 export { default as Avatar } from './Avatar/Avatar';
 export { default as Badge } from './Badge/Badge';
 export { default as Button } from './Button/Button';
+export { default as CheckBox } from './CheckBox/CheckBox';
 export { default as DialogBanner } from './DialogBanner/DialogBanner';
 export { default as DialogItemPreview } from './DialogItemPreview/DialogItemPreview';
+export { default as DialogWindow } from './DialogWindow/DialogWindow';
 export { default as Dropdown } from './Dropdown/Dropdown';
 export { default as Header } from './Header/Header';
 export { default as Loader } from './Loader/Loader';
+export { default as Message } from './Message/Message';
+export { default as MessageInput } from './MessageInput/MessageInput';
 export { default as MessageSeparator } from './MessageSeparator/MessageSeparator';
 export { default as Placeholder } from './Placeholder/Placeholder';
 export { default as PreviewFileMessage } from './PreviewFileMessage/PreviewFileMessage';
 export { default as SettingsItem } from './SettingsItem/SettingsItem';
 export { default as TextField } from './TextField/TextField';
+export { default as ToastProvider } from './Toast/ToastProvider';
+export { default as UserListItem } from './UserListItem/UserListItem';

package/dist/hooks/useModal.d.ts

@@ -0,0 +1,5 @@
+declare const useModal: () => {
+    isOpen: boolean;
+    toggleModal: () => void;
+};
+export default useModal;