quickblox-react-ui-kit 0.2.8 → 0.3.0-beta.2

package/.prettierignore

@@ -0,0 +1,4 @@
+/node_modules
+/public
+package.json
+package-lock.json

package/.prettierrc

@@ -0,0 +1,10 @@
+{
+  "semi": true,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "arrowParens": "always",
+  "endOfLine": "lf"
+}

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/Stubs.d.ts

@@ -12,6 +12,7 @@ export declare class Stubs {
     static initializeWithUsersMockData(ds: LocalDataSource): Promise<void>;
     static initializeWithDialogsMockData(ds: LocalDataSource): Promise<void>;
     static initializeWithMessagesMockData(ds: LocalDataSource): Promise<void>;
+    static initializeMessagesWithMockData(): MessageEntity[];
     static createDialogEntityByTypeWithEmptyValues(dialogType: DialogType): DialogEntity;
     static createDialogEntityWithError(): DialogEntity;
     static createDialogEntityByTypeWithDefaultValues(dialogType: DialogType): 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/AIWidgets/AIRephraseWidget/AIRephraseWidget.d.ts

@@ -10,7 +10,6 @@ type AIRephraseWidgetProps = {
     waitAIWidget: boolean;
     setWaitAIWidget: FunctionTypeBooleanToVoid;
     setMessageErrorToast: FunctionTypeStringToVoid;
-    setShowErrorToast: FunctionTypeBooleanToVoid;
     AIRephrase?: AIMessageWidget;
     messagesToView: MessageEntity[];
     currentUserId: number;

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

@@ -6,12 +6,8 @@ type DialogProps = {
     messagesViewModel: DialogViewModel;
     maxWidthToResize?: string;
     warningErrorText: string;
-    showErrorToast: boolean;
-    messageErrorToast: string;
     renderHeader: React.ReactNode;
     renderMessageList: React.ReactNode;
-    renderReplyMessagesPreview: React.ReactNode;
-    showReplyMessage: boolean;
     renderMessageInput: React.ReactNode;
     theme?: UiKitTheme;
     headerContent?: React.ReactNode;

package/dist/Presentation/Views/Dialog/DialogHeader/DialogBackIcon/DialogBackIcon.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './DialogBackIcon.scss';
+import { FunctionTypeVoidToVoid } from '../../../../../CommonTypes/BaseViewModel';
+type RenderLeftActionsProps = {
+    onClickBack: FunctionTypeVoidToVoid;
+};
+declare const DialogBackIcon: React.FC<RenderLeftActionsProps>;
+export default DialogBackIcon;

package/dist/Presentation/Views/Dialog/DialogHeader/{RenderRightActions/RenderRightActions.d.ts → DialogInfoIcon/DialogInfoIcon.d.ts}

@@ -1,10 +1,10 @@
 import React from 'react';
-import './RenderRightActions.scss';
+import './DialogInfoIcon.scss';
 import { FunctionTypeVoidToVoid } from '../../../../../CommonTypes/BaseViewModel';
 import UiKitTheme from '../../../../themes/UiKitTheme';
 type RenderRightActionsProps = {
     onClickInfo: FunctionTypeVoidToVoid;
     theme?: UiKitTheme;
 };
-declare const RenderRightActions: React.FC<RenderRightActionsProps>;
-export default RenderRightActions;
+declare const DialogInfoIcon: React.FC<RenderRightActionsProps>;
+export default DialogInfoIcon;

package/dist/Presentation/Views/Dialog/{MessageInput/MessageInput.d.ts → InputMessage/InputMessage.d.ts}

@@ -17,5 +17,5 @@ type MessageInputProps = {
     maxWidthToResizing: string;
     theme?: UiKitTheme;
 };
-declare const MessageInput: React.FC<MessageInputProps>;
-export default MessageInput;
+declare const InputMessage: React.FC<MessageInputProps>;
+export default InputMessage;

package/dist/Presentation/Views/Dialog/Message/OutgoinForwardedMessage/OutgoinForwardedMessage.d.ts

@@ -9,7 +9,7 @@ declare function OutgoingForwardedMessage(props: {
     onReply: FunctionTypeMessageEntityToVoid;
     onForward: FunctionTypeMessageEntityToVoid;
     repliedUserName: string;
-    renderOringinalMessage: React.ReactNode;
+    renderOriginalMessage: React.ReactNode;
     date_sent: string;
     status_message: number;
     enableForwarding: boolean;

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { MessageEntity } from '../../../../Domain/entity/MessageEntity';
+import { FunctionTypeMessageEntityToVoid } from '../../../../CommonTypes/BaseViewModel';
+import './MessageContextMenu.scss';
+export type MessageContextMenuProps = {
+    message: MessageEntity;
+    enableForwarding: boolean;
+    enableReplying: boolean;
+    onReply: FunctionTypeMessageEntityToVoid;
+    onForward: FunctionTypeMessageEntityToVoid;
+};
+export default function MessageContextMenu({ message, enableReplying, enableForwarding, onReply, onForward, }: MessageContextMenuProps): JSX.Element;

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;
+    userId?: 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, userId, enableForwarding, enableReplying, onReply, onForward, listRef, messagesToView, AITranslateWidget, AIAssistWidget, maxTokens, defaultTranslationLanguage, languagesForAITranslate, onError, }: MessageItemProps): JSX.Element | null;

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

@@ -10,7 +10,6 @@ type HeaderDialogsProps = {
     dialogViewModel: DialogListViewModel;
     onCloseDialogInformationHandler: FunctionTypeVoidToVoid;
     onShowAllMemberClick: FunctionTypeBooleanToVoid;
-    showMembersDialogInitValue?: boolean;
     users: UserEntity[];
     theme?: UiKitTheme;
     subHeaderContent?: React.ReactNode;

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

@@ -1,10 +1,12 @@
 import React from 'react';
-import './DialogList.scss';
-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';
 import UiKitTheme from '../../themes/UiKitTheme';
+import './DialogList.scss';
+import '../DialogListHeader/DialogListHeader.scss';
+import '../../ui-components/Header/Header.scss';
 type DialogsComponentSettings = {
     themeName?: ThemeNames;
     withoutHeader?: boolean;
@@ -17,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/CreateDialog/CreateDialog.d.ts

@@ -2,12 +2,12 @@ import React from 'react';
 import './CreateDialog.scss';
 import { FunctionTypeVoidToVoid } from '../../../../CommonTypes/BaseViewModel';
 type CreateDialogProps = {
-    createPrivateDialogClickHandler: FunctionTypeVoidToVoid;
-    createPrivateDialogTouchHandler: FunctionTypeVoidToVoid;
-    createGroupDialogClickHandler: FunctionTypeVoidToVoid;
-    createGroupDialogTouchHandler: FunctionTypeVoidToVoid;
-    createPublicDialogClickHandler: FunctionTypeVoidToVoid;
-    createPublicDialogTouchHandler: FunctionTypeVoidToVoid;
+    createPrivateDialogOnClick: FunctionTypeVoidToVoid;
+    createPrivateDialogOnTouch: FunctionTypeVoidToVoid;
+    createGroupDialogOnClick: FunctionTypeVoidToVoid;
+    createGroupDialogOnTouch: FunctionTypeVoidToVoid;
+    createPublicDialogOnClick: FunctionTypeVoidToVoid;
+    createPublicDialogOnTouch: FunctionTypeVoidToVoid;
 };
 declare const CreateDialog: React.FC<CreateDialogProps>;
 export default CreateDialog;

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

@@ -3,10 +3,9 @@ import React from 'react';
 import { FunctionTypeVoidToVoid } from '../../../CommonTypes/BaseViewModel';
 type YesNoQuestionProps = {
     messageText?: string;
-    ClickYesActionHandler?: FunctionTypeVoidToVoid;
-    TouchYesActionHandler?: FunctionTypeVoidToVoid;
-    ClickNoActionHandler?: FunctionTypeVoidToVoid;
-    TouchNoActionHandler?: FunctionTypeVoidToVoid;
+    onClickYesAction?: FunctionTypeVoidToVoid;
+    OnTouchYesAction?: FunctionTypeVoidToVoid;
+    onTouchNoAction?: FunctionTypeVoidToVoid;
     yesActionCaption?: string;
     noActionCaption?: string;
 };

package/dist/Presentation/components/UI/Buttons/MainButton/MainButton.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import './MainButton.scss';
+import './MainButton.css';
 import { FunctionTypeVoidToVoid } from '../../../../../CommonTypes/BaseViewModel';
 export declare const TypeButton: {
     readonly default: "default";

package/dist/Presentation/components/containers/SectionList/useComponent.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, RefObject } from 'react';
 export interface SectionItem<T> {
     title: string;
     data: Dictionary<T[]>;
@@ -16,12 +16,12 @@ export interface SectionListProps<T> {
      * within half the visible length of the list.
      */
     onEndReachedThreshold?: number;
-    renderItem: (item: [string, T[]]) => ReactNode;
+    renderItem: (item: [string, T[]], listRef: RefObject<HTMLDivElement>) => ReactNode;
     renderSectionHeader?: (section: SectionItem<T>) => ReactNode;
     renderSectionFooter?: (section: SectionItem<T>) => ReactNode;
 }
 declare const _default: <T>(props: SectionListProps<T>) => Record<"refs", {
-    listContentRef: import("react").RefObject<HTMLDivElement>;
+    listContentRef: RefObject<HTMLDivElement>;
 }> & Record<"handlers", {
     scrollHandler: () => void;
 }>;

package/dist/Presentation/icons/actions/index.d.ts

@@ -0,0 +1,26 @@
+export { ReactComponent as AddContactSvg } from './add-contact.svg';
+export { ReactComponent as AddSvg } from './add.svg';
+export { ReactComponent as ArchiveSvg } from './archive.svg';
+export { ReactComponent as CopySvg } from './copy.svg';
+export { ReactComponent as DeleteSvg } from './delete.svg';
+export { ReactComponent as DownloadSvg } from './download.svg';
+export { ReactComponent as EditSvg } from './edit.svg';
+export { ReactComponent as EmojiSvg } from './emoji.svg';
+export { ReactComponent as ForwardFilledSvg } from './forward-filled.svg';
+export { ReactComponent as HunguplSvg } from './hungup.svg';
+export { ReactComponent as IncomeCallSvg } from './income-call.svg';
+export { ReactComponent as LikeSvg } from './like.svg';
+export { ReactComponent as NewChatSvg } from './new-chat.svg';
+export { ReactComponent as OutcomeCllSvg } from './outcome-call.svg';
+export { ReactComponent as PhoneFilledSvg } from './phone-filled.svg';
+export { ReactComponent as PhoneSvg } from './phone.svg';
+export { ReactComponent as Remove2Svg } from './remove-2.svg';
+export { ReactComponent as RemoveSvg } from './remove.svg';
+export { ReactComponent as RephraseSvg } from './rephrase.svg';
+export { ReactComponent as ReplyFilledSvg } from './reply-filled.svg';
+export { ReactComponent as SendSvg } from './send.svg';
+export { ReactComponent as ShareSvg } from './share.svg';
+export { ReactComponent as SwapCameraSvg } from './swap-camera.svg';
+export { ReactComponent as UnarchiveSvg } from './unarchive.svg';
+export { ReactComponent as VideoSvg } from './video.svg';
+export { ReactComponent as VoiceSvg } from './voice.svg';

package/dist/Presentation/icons/contents/index.d.ts

@@ -0,0 +1,13 @@
+export { ReactComponent as BroadcastSvg } from './broadcast.svg';
+export { ReactComponent as ChatFilledSvg } from './chat-filled.svg';
+export { ReactComponent as ChatSvg } from './chat.svg';
+export { ReactComponent as ConferenceSvg } from './conference.svg';
+export { ReactComponent as ContactFilledSvg } from './contact-filled.svg';
+export { ReactComponent as ContactSvg } from './contact.svg';
+export { ReactComponent as GroupChatSvg } from './group-chat.svg';
+export { ReactComponent as NotificationsSvg } from './notifications.svg';
+export { ReactComponent as PrivateChatSvg } from './private-chat.svg';
+export { ReactComponent as PublicChannelSvg } from './public-channel.svg';
+export { ReactComponent as StreamFilledSvg } from './stream-filled.svg';
+export { ReactComponent as SteamSvg } from './stream.svg';
+export { ReactComponent as UserSvg } from './user.svg';

package/dist/Presentation/icons/index.d.ts

@@ -0,0 +1,7 @@
+export * from './actions';
+export * from './contents';
+export * from './media';
+export * from './moderation';
+export * from './navigation';
+export * from './status';
+export * from './toggle';

package/dist/Presentation/icons/media/index.d.ts

@@ -0,0 +1,12 @@
+export { ReactComponent as AttachmentSvg } from './attachment.svg';
+export { ReactComponent as AudioFileSvg } from './audio-file.svg';
+export { ReactComponent as BrokenFileSvg } from './broken-file.svg';
+export { ReactComponent as CameraSvg } from './camera.svg';
+export { ReactComponent as FileSvg } from './file.svg';
+export { ReactComponent as GifFileSvg } from './gif-file.svg';
+export { ReactComponent as ImageFilledSvg } from './image-filled.svg';
+export { ReactComponent as ImageSvg } from './image.svg';
+export { ReactComponent as LinkSvg } from './link.svg';
+export { ReactComponent as LocationSvg } from './location.svg';
+export { ReactComponent as TextDocumentSvg } from './text-document.svg';
+export { ReactComponent as VideoFileSvg } from './video-file.svg';

package/dist/Presentation/icons/moderation/index.d.ts

@@ -0,0 +1,5 @@
+export { ReactComponent as AdminSvg } from './admin.svg';
+export { ReactComponent as BannedSvg } from './banned.svg';
+export { ReactComponent as ModerationsSvg } from './moderations.svg';
+export { ReactComponent as FreezeSvg } from './freeze.svg';
+export { ReactComponent as MutedSvg } from './muted.svg';

package/dist/Presentation/icons/navigation/index.d.ts

@@ -0,0 +1,12 @@
+export { ReactComponent as ArrowLeftSvg } from './arrow-left.svg';
+export { ReactComponent as ArrowRightSvg } from './arrow-right.svg';
+export { ReactComponent as BackSvg } from './back.svg';
+export { ReactComponent as CloseSvg } from './close.svg';
+export { ReactComponent as DownSvg } from './down.svg';
+export { ReactComponent as NextSVG } from './next.svg';
+export { ReactComponent as LeaveSvg } from './leave.svg';
+export { ReactComponent as MoreSvg } from './more.svg';
+export { ReactComponent as PlusSvg } from './plus.svg';
+export { ReactComponent as RefreshSvg } from './refresh.svg';
+export { ReactComponent as SearchSvg } from './search.svg';
+export { ReactComponent as SettingsFilledSvg } from './settings-filled.svg';

package/dist/Presentation/icons/status/index.d.ts

@@ -0,0 +1,7 @@
+export { ReactComponent as ErrorSvg } from './error.svg';
+export { ReactComponent as HelpSvg } from './help.svg';
+export { ReactComponent as InformationSvg } from './information.svg';
+export { ReactComponent as LoaderSvg } from './loader.svg';
+export { ReactComponent as MentionSvg } from './mention.svg';
+export { ReactComponent as SentSvg } from './sent.svg';
+export { ReactComponent as ViewedDeliveredSvg } from './viewed-delivered.svg';

package/dist/Presentation/icons/toggle/index.d.ts

@@ -0,0 +1,23 @@
+export { ReactComponent as CameraOffSvg } from './camera-off.svg';
+export { ReactComponent as CameraOnSvg } from './camera-on.svg';
+export { ReactComponent as CheckOffSvg } from './check-off.svg';
+export { ReactComponent as CheckOnSvg } from './check-on.svg';
+export { ReactComponent as FavoriteSvg } from './favorite.svg';
+export { ReactComponent as FullScreenSvg } from './full-screen.svg';
+export { ReactComponent as HideSvg } from './hide.svg';
+export { ReactComponent as LouderSvg } from './louder.svg';
+export { ReactComponent as MicOffSvg } from './mic-off.svg';
+export { ReactComponent as MicOnSvg } from './mic-on.svg';
+export { ReactComponent as MinimizeSvg } from './minimize.svg';
+export { ReactComponent as NotifyOffSvg } from './notify-off.svg';
+export { ReactComponent as NotifyOnSvg } from './notify-on.svg';
+export { ReactComponent as PauseSvg } from './pause.svg';
+export { ReactComponent as PlaySvg } from './play.svg';
+export { ReactComponent as QuiteSvg } from './quite.svg';
+export { ReactComponent as RecordSvg } from './record.svg';
+export { ReactComponent as ScreenShareSvg } from './screenshare.svg';
+export { ReactComponent as ShowSvg } from './show.svg';
+export { ReactComponent as SpeakerOffSvg } from './speaker-off.svg';
+export { ReactComponent as SpeakerSvg } from './speaker.svg';
+export { ReactComponent as StopRecordSvg } from './stop-record.svg';
+export { ReactComponent as StopShareSvg } from './stop-share.svg';

package/dist/Presentation/layouts/Desktop/QuickBloxUIKitDesktopLayout.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import '../../Views/Dialog/Dialog.scss';
+import '../../Views/Dialog/DialogHeader/DialogInfoIcon/DialogInfoIcon.scss';
 import UiKitTheme from '../../themes/UiKitTheme';
 import { AIMessageWidget } from '../../Views/Dialog/AIWidgets/AIMessageWidget';
 type AIWidgetPlaceHolder = {

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

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import './Avatar.scss';
+export interface AvatarProps {
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+    icon?: ReactElement;
+    className?: string;
+    src?: string;
+}
+export default function Avatar({ icon, size, className, src, }: AvatarProps): JSX.Element;

package/dist/Presentation/ui-components/Avatar/avatar.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Avatar from './Avatar';
+declare const meta: Meta<typeof Avatar>;
+export default meta;
+type StoryDefault = StoryObj<typeof meta>;
+export declare const AvatarDefault: StoryDefault;
+export declare const AvatarIcon: StoryDefault;
+export declare const AvatarImage: StoryDefault;

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import './Badge.scss';
+interface BadgeProps {
+    count: number;
+    limit?: number;
+    mute?: boolean;
+    classNames?: string;
+}
+export default function Badge({ count, limit, mute, classNames, }: BadgeProps): JSX.Element;
+export {};

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

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Badge from './Badge';
+declare const meta: Meta<typeof Badge>;
+export default meta;
+type StoryDefault = StoryObj<typeof meta>;
+export declare const BadgeDefault: StoryDefault;
+export declare const BadgeCount: StoryDefault;
+export declare const BadgeMute: StoryDefault;

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

@@ -0,0 +1,12 @@
+import { ButtonHTMLAttributes, DetailedHTMLProps, ReactElement } from 'react';
+import './Button.scss';
+type HTMLButtonProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+interface ButtonProps extends HTMLButtonProps {
+    variant?: 'default' | 'outlined' | 'danger' | 'text';
+    disabled?: boolean;
+    loading?: boolean;
+    className?: string;
+    children?: ReactElement | string | number;
+}
+export default function Button({ variant, className, disabled, loading, children, ...rest }: ButtonProps): JSX.Element;
+export {};

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

@@ -0,0 +1,83 @@
+import type { StoryObj } from '@storybook/react';
+import Button from './Button';
+declare const meta: {
+    title: string;
+    component: typeof Button;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    args: {
+        disabled: false;
+        loading: false;
+        className: string;
+        children: string;
+    };
+    argTypes: {
+        variant: {
+            options: string[];
+            control: {
+                type: string;
+            };
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+                type: {
+                    summary: string;
+                };
+            };
+            description: string;
+        };
+        disabled: {
+            table: {
+                defaultValue: {
+                    summary: boolean;
+                };
+                type: {
+                    summary: string;
+                };
+            };
+            description: string;
+        };
+        loading: {
+            table: {
+                defaultValue: {
+                    summary: boolean;
+                };
+                type: {
+                    summary: string;
+                };
+            };
+            description: string;
+        };
+        className: {
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+                type: {
+                    summary: string;
+                };
+            };
+            description: string;
+        };
+        children: {
+            table: {
+                defaultValue: {
+                    summary: null;
+                };
+                type: {
+                    summary: string;
+                };
+            };
+            description: string;
+        };
+    };
+};
+export default meta;
+type StoryDefault = StoryObj<typeof meta>;
+export declare const ButtonDefault: StoryDefault;
+export declare const ButtonOutline: StoryDefault;
+export declare const ButtonDanger: StoryDefault;
+export declare const ButtonText: StoryDefault;

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import './CheckBox.scss';
+interface CheckBoxProps {
+    disabled: boolean;
+    checked: boolean;
+    onChange?: (isSelected: boolean) => void;
+}
+export default function CheckBox({ disabled, checked, onChange, }: CheckBoxProps): JSX.Element;
+export {};