quickblox-react-ui-kit 0.4.4-alpha.5 → 0.4.5-beta.2

package/src/Presentation/Views/Dialog/useDialogViewModel.ts

@@ -37,6 +37,7 @@ import { DefaultConfigurations } from '../../../Data/DefaultConfigurations';
 import { MessageDTOMapper } from '../../../Data/source/remote/Mapper/MessageDTOMapper';
 import { UpdateCurrentDialogInDataSourceUseCase } from '../../../Domain/use_cases/UpdateCurrentDialogInDataSourceUseCase';
 import { RemoteDataSource } from '../../../Data/source/remote/RemoteDataSource';
+import { QBUIKitConfig } from '../../../CommonTypes/CommonTypes';
 
 export default function useDialogViewModel(
   dialogType: DialogType,
@@ -55,7 +56,7 @@ export default function useDialogViewModel(
   const currentContext = useQbInitializedDataContext();
   const remoteDataSourceMock: RemoteDataSource =
     currentContext.storage.REMOTE_DATA_SOURCE;
-  const QBConfig =
+  const QBConfig: QBUIKitConfig =
     currentContext.InitParams.qbConfig ||
     DefaultConfigurations.getDefaultQBConfig();
   const { regexUserName } = QBConfig.appConfig;
@@ -68,6 +69,27 @@ export default function useDialogViewModel(
 
   const [typingText, setTypingText] = useState<string>('');
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/no-empty-function
+  function informDataSources(item: DialogEntity) {
+    const updateCurrentDialogInDataSourceUseCase: UpdateCurrentDialogInDataSourceUseCase =
+      new UpdateCurrentDialogInDataSourceUseCase(
+        new DialogsRepository(
+          currentContext.storage.LOCAL_DATA_SOURCE,
+          remoteDataSourceMock,
+        ),
+        item as GroupDialogEntity,
+        QBConfig,
+      );
+
+    updateCurrentDialogInDataSourceUseCase.execute().catch((e) => {
+      console.log(
+        'useDialogViewModel Error updateCurrentDialogInDataSourceUseCase: ',
+        stringifyError(e),
+      );
+      throw new Error(stringifyError(e));
+    });
+  }
+
   async function getMessages(currentPagination?: Pagination) {
     setLoading(true);
 
@@ -161,6 +183,19 @@ export default function useDialogViewModel(
 
           return newItems;
         });
+        // eslint-disable-next-line promise/always-return
+        // if (
+        //   dialog?.type === DialogType.private ||
+        //   dialog?.type === DialogType.group
+        // ) {
+        //   const updDialog = { ...dialog };
+        //
+        //   updDialog.unreadMessageCount = 0;
+        //   setDialog(updDialog);
+        //
+        //   informDataSources(updDialog);
+        //
+        // }
         setLoading(false);
         setPagination(data.CurrentPagination);
         setError('');
@@ -385,26 +420,6 @@ export default function useDialogViewModel(
     return Promise.resolve(resultEnity);
   };
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/no-empty-function
-  function informDataSources(item: DialogEntity) {
-    const updateCurrentDialogInDataSourceUseCase: UpdateCurrentDialogInDataSourceUseCase =
-      new UpdateCurrentDialogInDataSourceUseCase(
-        new DialogsRepository(
-          currentContext.storage.LOCAL_DATA_SOURCE,
-          remoteDataSourceMock,
-        ),
-        item as GroupDialogEntity,
-      );
-
-    updateCurrentDialogInDataSourceUseCase.execute().catch((e) => {
-      console.log(
-        'useDialogViewModel Error updateCurrentDialogInDataSourceUseCase: ',
-        stringifyError(e),
-      );
-      throw new Error(stringifyError(e));
-    });
-  }
-
   const sendMessage = (messageToSend: MessageEntity) => {
     const sendTextMessageUseCase: SendTextMessageUseCase =
       new SendTextMessageUseCase(
@@ -431,7 +446,10 @@ export default function useDialogViewModel(
 
               return newState;
             });
-            if (dialog?.type === DialogType.private) {
+            if (
+              dialog?.type === DialogType.private ||
+              dialog?.type === DialogType.group
+            ) {
               const updDialog = { ...dialog };
 
               updDialog.lastMessage.dateSent = messageEntity.date_sent / 1000;

package/src/Presentation/Views/DialogList/useDialogListViewModel.ts

@@ -543,6 +543,7 @@ export default function useDialogListViewModel(
           remoteDataSourceMock,
         ),
         item as GroupDialogEntity,
+        QBConfig,
       );
 
     updateCurrentDialogInDataSourceUseCase.execute().catch((e) => {
@@ -559,8 +560,11 @@ export default function useDialogListViewModel(
       return newDialog as DialogEntity;
     },
     set entity(item) {
-      setNewDialog(item);
-      informDataSources(item);
+      const updDialog = { ...item };
+
+      updDialog.unreadMessageCount = 0;
+      setNewDialog(updDialog);
+      informDataSources(updDialog);
     },
     dialogs,
     loading,

package/src/Presentation/Views/PreviewDialog/PreviewDialog.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 import React, { useEffect } from 'react';
-import QB from 'quickblox/quickblox';
 import './PreviewDialog.scss';
 import { DialogType } from '../../../Domain/entity/DialogTypes';
 import PreviewDialogViewModel from './PreviewDialogViewModel';
@@ -17,6 +16,7 @@ import DialogItemPreview from '../../ui-components/DialogItemPreview/DialogItemP
 import Dropdown from '../../ui-components/Dropdown/Dropdown';
 import { GroupChatSvg, MoreSvg, PublicChannelSvg, UserSvg } from '../../icons';
 import Avatar from '../../ui-components/Avatar/Avatar';
+import { getQB } from '../../../qb-api-calls';
 
 export type ThemeNames = 'light' | 'dark' | 'custom';
 type PreviewDialogsColorTheme = {
@@ -171,6 +171,7 @@ const PreviewDialog = ({
 
   async function getFileForPreview() {
     const messageParts = getMessageParts(previewMessage || '');
+    const QB = getQB();
 
     setMessageContentParts(messageParts);
 

package/src/Presentation/icons/contents/index.ts

@@ -12,6 +12,8 @@ import StreamFilledSvg from './stream-filled.svg?react';
 import SteamSvg from './stream.svg?react';
 import UserSvg from './user.svg?react';
 
+console.log('UserSvg in contents/index.ts:', UserSvg); // <-- Добавляем отладку
+
 export {
   BroadcastSvg,
   ChatFilledSvg,

package/src/Presentation/icons/index.ts

@@ -1,7 +1,23 @@
 export * from './actions';
-export * from './contents';
+// export * from './contents';
 export * from './media';
 export * from './moderation';
 export * from './navigation';
 export * from './status';
 export * from './toggle';
+
+export {
+  BroadcastSvg,
+  ChatFilledSvg,
+  ChatSvg,
+  ConferenceSvg,
+  ContactFilledSvg,
+  ContactSvg,
+  GroupChatSvg,
+  NotificationsSvg,
+  PrivateChatSvg,
+  PublicChannelSvg,
+  StreamFilledSvg,
+  SteamSvg,
+  UserSvg,
+} from './contents/index';

package/src/Presentation/layouts/TestStage/LoginView/Login.scss

@@ -15,23 +15,26 @@ strong {
 /* ---------- LOGIN ---------- */
 
 #login {
-  border: 3px solid #6c38cc;
   margin: 50px auto;
   width: 100%;
 }
 
+form {
+  display: flex;
+  flex-flow: column;
+}
+
 form fieldset input[type="text"],
 input[type="password"] {
   appearance: none;
   background: #e5e5e5;
-  border: none;
   border-radius: 3px;
   color: #5a5656;
   font-family: inherit;
   font-size: 14px;
   height: 50px;
   outline: none;
-  padding: 0px 10px;
+  padding: 0;
   width: 100%;
   border: 1px solid #008dde;
   margin: 1px;

package/src/Presentation/providers/QuickBloxUIKitProvider/QuickBloxUIKitProvider.tsx

@@ -16,6 +16,7 @@ import EventMessagesRepository from '../../../Data/repository/EventMessagesRepos
 import { CallBackFunction } from '../../../Domain/use_cases/base/IUseCase';
 import { DefaultConfigurations } from '../../../Data/DefaultConfigurations';
 import { QBUIKitConfig } from '../../../CommonTypes/CommonTypes';
+import { getQB, setQB } from '../../../qb-api-calls';
 
 const initialValues = {
   LOCAL_DATA_SOURCE: new LocalDataSource(), // localstorage or session storage
@@ -144,6 +145,18 @@ const initDataContext: QBDataContextType = {
   },
   authorize: async (authorizationData: AuthorizationData): Promise<void> => {
     console.log('UI Kit authorize');
+    console.log('QB inside library:', getQB());
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    console.log('QB inside authorize:', window.QB);
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    if (typeof window !== 'undefined' && window.QB) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      setQB(window.QB);
+    }
     initialValues.REMOTE_DATA_SOURCE.authInformation = authorizationData;
     initialValues.REMOTE_DATA_SOURCE.setAuthProcessedSuccessed();
     //

package/src/Presentation/ui-components/Avatar/Avatar.tsx

@@ -1,8 +1,11 @@
+import React from 'react';
 import { ReactElement } from 'react';
 import cn from 'classnames';
 import { UserSvg } from '../../icons';
 import './Avatar.scss';
 
+console.log('UserSvg:', UserSvg); // <-- Добавляем отладку
+
 export interface AvatarProps {
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
   icon?: ReactElement;

package/src/Presentation/ui-components/Avatar/avatar.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import {
@@ -73,6 +74,7 @@ export const AvatarIcon: StoryDefault = {
 
 export const AvatarImage: StoryDefault = {
   args: {
-    src: 'https://quickblox.com/wp-content/themes/QuickbloxTheme2021/img/chat-messaging.svg',
+    // src: 'https://quickblox.com/wp-content/themes/QuickbloxTheme2021/img/chat-messaging.svg',
+    src: 'https://cdn-ikpjoif.nitrocdn.com/WZsqFPiehrtwFaaeJNQAQZrkRMgaTuyL/assets/images/optimized/rev-83f47e6/quickblox.com/wp-content/themes/QuickbloxTheme2021/img/custom-white-label-solution.jpg',
   },
 };

package/src/Presentation/ui-components/Badge/Badge.stories.ts

@@ -1,5 +1,5 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-
 import Badge from './Badge';
 
 const meta: Meta<typeof Badge> = {
@@ -14,7 +14,7 @@ const meta: Meta<typeof Badge> = {
     count: {
       table: {
         defaultValue: {
-          summary: 0,
+          summary: '0',
         },
       },
       description: 'Number of unread messages',
@@ -22,7 +22,7 @@ const meta: Meta<typeof Badge> = {
     limit: {
       table: {
         defaultValue: {
-          summary: 99,
+          summary: '99',
         },
       },
       description: 'Limt of message count',

package/src/Presentation/ui-components/Badge/Badge.tsx

@@ -1,5 +1,5 @@
+import React from 'react';
 import cn from 'classnames';
-
 import './Badge.scss';
 
 interface BadgeProps {

package/src/Presentation/ui-components/Button/Button.stories.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import Button from './Button';
@@ -30,7 +31,7 @@ const meta = {
     disabled: {
       table: {
         defaultValue: {
-          summary: false,
+          summary: 'false',
         },
         type: { summary: 'boolean' },
       },
@@ -39,7 +40,7 @@ const meta = {
     loading: {
       table: {
         defaultValue: {
-          summary: false,
+          summary: 'false',
         },
         type: { summary: 'boolean' },
       },
@@ -57,7 +58,7 @@ const meta = {
     children: {
       table: {
         defaultValue: {
-          summary: null,
+          summary: undefined,
         },
         type: { summary: 'ReactElement | string | number' },
       },

package/src/Presentation/ui-components/Button/Button.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ButtonHTMLAttributes, DetailedHTMLProps, ReactElement } from 'react';
 import cn from 'classnames';
 

package/src/Presentation/ui-components/CheckBox/CheckBox.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import './CheckBox.scss';
 
 interface CheckBoxProps {

package/src/Presentation/ui-components/DialogBanner/DialogBanner.stories.ts

@@ -1,5 +1,5 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-
 import DialogBanner from './DialogBanner';
 
 const meta = {

package/src/Presentation/ui-components/DialogBanner/DialogBanner.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import  DownSvg  from '../../icons/navigation/down.svg?react';
 import './DialogBanner.scss';
 

package/src/Presentation/ui-components/DialogItemPreview/DialogItemPreview.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 import DialogItemPreview from './DialogItemPreview';
@@ -72,7 +73,7 @@ const meta: Meta<typeof DialogItemPreview> = {
     active: {
       table: {
         defaultValue: {
-          summary: false,
+          summary: 'false',
         },
         type: { summary: 'boolean' },
       },
@@ -118,7 +119,7 @@ export const DialogItemPreviewDefault: Story = {
   },
   render: (args) => {
     // eslint-disable-next-line no-param-reassign
-    args.date = new Date(args.date!).toLocaleDateString();
+    args.date = args.date ? new Date(args.date!).toLocaleDateString() : new Date().toLocaleDateString();
 
     return <DialogItemPreview {...args} />;
   },
@@ -133,6 +134,7 @@ export const DialogItemPreviewFullScreen: Story = {
       "Hello, dear Mr. User. Thank you for choosing us. I'm here to assist with your order's delivery. Please provide your preferred address and any specific instructions. We offer standard, express, and same-day delivery in select areas. Let us know your convenience, and we'll ensure a smooth process.",
     badge: <Badge count={5} />,
     contextMenu: <MoreSvg />,
+
   },
   parameters: {
     viewport: {
@@ -141,7 +143,7 @@ export const DialogItemPreviewFullScreen: Story = {
   },
   render: (args) => {
     // eslint-disable-next-line no-param-reassign
-    args.date = new Date(args.date!).toLocaleDateString();
+    args.date = new Date().toLocaleDateString();
 
     return <DialogItemPreview {...args} />;
   },
@@ -164,7 +166,7 @@ export const DialogItemPreviewMobileScreen: Story = {
   },
   render: (args) => {
     // eslint-disable-next-line no-param-reassign
-    args.date = new Date(args.date!).toLocaleDateString();
+    args.date = args.date ? new Date(args.date!).toLocaleDateString() : new Date().toLocaleDateString();
 
     return <DialogItemPreview {...args} />;
   },
@@ -187,7 +189,7 @@ export const DialogItemPreviewMobileScreenIPad: Story = {
   },
   render: (args) => {
     // eslint-disable-next-line no-param-reassign
-    args.date = new Date(args.date!).toLocaleDateString();
+    args.date = args.date ? new Date(args.date!).toLocaleDateString() : new Date().toLocaleDateString();
 
     return <DialogItemPreview {...args} />;
   },

package/src/Presentation/ui-components/DialogItemPreview/DialogItemPreview.tsx

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import React, { ReactElement } from 'react';
 import cn from 'classnames';
 import { FunctionTypeVoidToVoid } from '../../../CommonTypes/BaseViewModel';
 import './DialogItemPreview.scss';

package/src/Presentation/ui-components/DialogWindow/DialogWindow.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
@@ -40,7 +41,7 @@ const meta: Meta<typeof DialogWindow> = {
     open: {
       table: {
         defaultValue: {
-          summary: false,
+          summary: 'false',
         },
         type: { summary: 'boolean' },
       },

package/src/Presentation/ui-components/DialogWindow/DialogWindow.tsx

@@ -22,7 +22,7 @@ export default function DialogWindow({
   title,
   className,
   disableActions = false,
-}: DialogWindowProps): ReactNode {
+}: DialogWindowProps): React.JSX.Element | null {
   if (!open) return null;
 
   return createPortal(
@@ -40,5 +40,5 @@ export default function DialogWindow({
       </div>
     </div>,
     document.body,
-  ) as unknown as ReactNode;
+  ) as unknown as React.JSX.Element | null;
 }

package/src/Presentation/ui-components/Dropdown/Dropdown.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { LocationSvg, NextSVG } from '../../icons';
@@ -23,7 +24,7 @@ const meta: Meta<typeof Dropdown> = {
       control: false,
       table: {
         defaultValue: {
-          summary: null,
+          summary: undefined,
         },
         type: { summary: 'ReactElement | string | number' },
       },
@@ -54,7 +55,7 @@ const meta: Meta<typeof Dropdown> = {
     disabled: {
       table: {
         defaultValue: {
-          summary: false,
+          summary: 'false',
         },
         type: { summary: 'boolean' },
       },

package/src/Presentation/ui-components/Dropdown/Dropdown.tsx

@@ -1,4 +1,4 @@
-import {
+import React, {
   ReactElement,
   useEffect,
   useRef,

package/src/Presentation/ui-components/Dropdown/DropdownOption.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ReactElement } from 'react';
 import cn from 'classnames';
 

package/src/Presentation/ui-components/Header/Header.scss

@@ -14,6 +14,11 @@
     width: 24px;
     height: 24px;
     flex-shrink: 0;
+
+    svg {
+      width: 24px;
+      height: 24px;
+    }
   }
 
   &__back {

package/src/Presentation/ui-components/Header/Header.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 import Header from './Header';

package/src/Presentation/ui-components/Header/Header.tsx

@@ -1,4 +1,4 @@
-import { Children, ReactElement } from 'react';
+import React, { Children, ReactElement } from 'react';
 import cn from 'classnames';
 import { FunctionTypeVoidToVoid } from '../../../CommonTypes/BaseViewModel';
 import { BackSvg } from '../../icons';

package/src/Presentation/ui-components/Loader/Loader.stories.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import Loader from './Loader';

package/src/Presentation/ui-components/Loader/Loader.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import cn from 'classnames';
 
 import { LoaderSvg } from '../../icons';

package/src/Presentation/ui-components/Message/Bubble/FileBubble/FileBubble.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import './FileBubble.scss';
 import FileUrl from '../../FileUrl/FileUrl';
 

package/src/Presentation/ui-components/Message/Bubble/ImageBubble/ImageBubble.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import './ImageBubble.scss';
 
 interface ImageBubbleProps {

package/src/Presentation/ui-components/Message/Bubble/TextBubble/TextBubble.scss

@@ -20,7 +20,6 @@
     justify-content: flex-start;
     flex-shrink: 0;
     position: relative;
-    width: 100%;
   }
 
   &__outgoing {

package/src/Presentation/ui-components/Message/Bubble/TextBubble/TextBubble.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import {
   HighLightLink,

package/src/Presentation/ui-components/Message/Bubble/VideoBubble/VideoBubble.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import './VideoBubble.scss';
 
 interface VideoBubbleProps {

package/src/Presentation/ui-components/Message/FileUrl/FileUrl.scss

@@ -33,9 +33,6 @@
         justify-content: center;
         width: 24px;
         height: 24px;
-        position: absolute;
-        left: 4px;
-        top: 4px;
       }
     }
   }

package/src/Presentation/ui-components/Message/FileUrl/FileUrl.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import FileSvg from '../../../icons/media/file.svg?react';
 import './FileUrl.scss';
 

package/src/Presentation/ui-components/MessageSeparator/MessageSeparator.stories.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import MessageSeparator from './MessageSeparator';

package/src/Presentation/ui-components/MessageSeparator/MessageSeparator.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import './MessageSeparator.scss';
 
 type MessageSeparatorProps = {

package/src/Presentation/ui-components/Placeholder/Placeholder.scss

@@ -24,6 +24,11 @@
     margin-bottom: 16px;
 
     fill: var(--caption);
+
+    svg {
+      width: 52px;
+      height: 52px;
+    }
   }
 
   &__retry {

package/src/Presentation/ui-components/Placeholder/Placeholder.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import Placeholder from './Placeholder';

package/src/Presentation/ui-components/Placeholder/Placeholder.tsx

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import React, { ReactElement } from 'react';
 import cn from 'classnames';
 
 import { RefreshSvg } from '../../icons';

package/src/Presentation/ui-components/PreviewFileMessage/PreviewFileMessage.scss

@@ -11,11 +11,14 @@
     background: var(--incoming-background, #e4e6e8);
     border-radius: 8px;
     flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
   }
 
   &__icon {
     fill: var(--caption);
-    padding: 6px;
+    width: 16px;
+    height: 16px;
   }
 
   &__name {

package/src/Presentation/ui-components/PreviewFileMessage/PreviewFileMessage.stories.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import PreviewFileMessage from './PreviewFileMessage';
 
@@ -71,7 +72,8 @@ export const PreviewFileMessageVideo: StoryDefault = {
 export const PreviewFileMessageImage: StoryDefault = {
   name: 'PreviewFileMessage Image',
   args: {
-    src: 'https://quickblox.com/wp-content/themes/QuickbloxTheme2021/img/chat-messaging.svg',
+    // src: 'https://quickblox.com/wp-content/themes/QuickbloxTheme2021/img/chat-messaging.svg',
+    src: 'https://cdn-ikpjoif.nitrocdn.com/WZsqFPiehrtwFaaeJNQAQZrkRMgaTuyL/assets/images/optimized/rev-83f47e6/quickblox.com/wp-content/themes/QuickbloxTheme2021/img/custom-white-label-solution.jpg',
     name: 'screenshot.jpg',
   },
 };