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

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

@@ -1,49 +1,23 @@
-import CameraOffSvg from './camera-off.svg?react';
-import CameraOnSvg from './camera-on.svg?react';
-import CheckOffSvg from './check-off.svg?react';
-import CheckOnSvg from './check-on.svg?react';
-import FavoriteSvg from './favorite.svg?react';
-import FullScreenSvg from './full-screen.svg?react';
-import HideSvg from './hide.svg?react';
-import LouderSvg from './louder.svg?react';
-import MicOffSvg from './mic-off.svg?react';
-import MicOnSvg from './mic-on.svg?react';
-import MinimizeSvg from './minimize.svg?react';
-import NotifyOffSvg from './notify-off.svg?react';
-import NotifyOnSvg from './notify-on.svg?react';
-import PauseSvg from './pause.svg?react';
-import PlaySvg from './play.svg?react';
-import QuiteSvg from './quite.svg?react';
-import RecordSvg from './record.svg?react';
-import ScreenShareSvg from './screenshare.svg?react';
-import ShowSvg from './show.svg?react';
-import SpeakerOffSvg from './speaker-off.svg?react';
-import SpeakerSvg from './speaker.svg?react';
-import StopRecordSvg from './stop-record.svg?react';
-import StopShareSvg from './stop-share.svg?react';
-
-export {
-  CameraOffSvg,
-  CameraOnSvg,
-  CheckOffSvg,
-  CheckOnSvg,
-  FavoriteSvg,
-  FullScreenSvg,
-  HideSvg,
-  LouderSvg,
-  MicOffSvg,
-  MicOnSvg,
-  MinimizeSvg,
-  NotifyOffSvg,
-  NotifyOnSvg,
-  PauseSvg,
-  PlaySvg,
-  QuiteSvg,
-  RecordSvg,
-  ScreenShareSvg,
-  ShowSvg,
-  SpeakerOffSvg,
-  SpeakerSvg,
-  StopRecordSvg,
-  StopShareSvg
-};
+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/src/Presentation/layouts/Desktop/QuickBloxUIKitDesktopLayout.tsx

@@ -47,11 +47,14 @@ import CreateNewDialogFlow from '../../Views/Flow/CreateDialogFlow/CreateNewDial
 import useQuickBloxUIKit from '../../../hooks/useQuickBloxUIKit';
 import { QuickBloxUIKitDesktopLayoutProps } from '../../../CommonTypes/CommonTypes';
 
-const QuickBloxUIKitDesktopLayout = ({
-  theme,
-  AITranslate,
-  AIRephrase,
-  AIAssist,
+const QuickBloxUIKitDesktopLayout: React.FC<
+  QuickBloxUIKitDesktopLayoutProps
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars,react/function-component-definition
+> = ({
+  theme = undefined,
+  AITranslate = undefined,
+  AIRephrase = undefined,
+  AIAssist = undefined,
   uikitHeightOffset = '0px',
 }: QuickBloxUIKitDesktopLayoutProps) => {
   const {
@@ -314,8 +317,8 @@ const QuickBloxUIKitDesktopLayout = ({
 
   const getDialogAvatar = (
     currentDialog: PreviewDialogViewModel,
-  ): React.JSX.Element | undefined => {
-    let AvatarComponent: React.JSX.Element | undefined;
+  ): JSX.Element | undefined => {
+    let AvatarComponent: JSX.Element | undefined;
 
     if (
       currentDialog.entity.type === DialogType.group ||
@@ -432,32 +435,34 @@ const QuickBloxUIKitDesktopLayout = ({
                     />
                   ) : null
                 }
-                renderDialogList={(handleSelectDialog) =>
-                  // eslint-disable-next-line no-nested-ternary
-                  dialogsViewModel?.loading ? (
-                    <div
-                      className="dialog-list__loader-container"
-                      style={{
-                        display: 'flex',
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                      }}
-                    >
-                      <Loader size="md" className="dialog-list__loader" />
-                    </div>
-                  ) : searchedDialogs.length > 0 ? (
-                    searchedDialogs.map((dlg, index) =>
-                      renderDialogItem(dlg, index, handleSelectDialog),
-                    )
-                  ) : (
-                    <Placeholder
-                      icon={<ChatSvg />}
-                      text="There are no dialogs."
-                      className="dialog-empty-chat-placeholder"
-                    />
-                  )
-                }
+                renderDialogList={(handleSelectDialog) => (
+                  <>
+                    {dialogsViewModel?.loading && (
+                      <div
+                        className="dialog-list__loader-container"
+                        style={{
+                          display: 'flex',
+                          flexDirection: 'row',
+                          alignItems: 'center',
+                          justifyContent: 'center',
+                        }}
+                      >
+                        <Loader size="md" className="dialog-list__loader" />
+                      </div>
+                    )}
+                    {searchedDialogs.length > 0 ? (
+                      searchedDialogs.map((dlg, index) =>
+                        renderDialogItem(dlg, index, handleSelectDialog),
+                      )
+                    ) : (
+                      <Placeholder
+                        icon={<ChatSvg />}
+                        text="There are no dialogs."
+                        className="dialog-empty-chat-placeholder"
+                      />
+                    )}
+                  </>
+                )}
               />
             ) : null
           }

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

@@ -8,7 +8,7 @@ type LoginProps = {
   loginHandler?: FunctionTypeLoginDataToVoid;
 };
 // eslint-disable-next-line react/function-component-definition
-const Login = ({ loginHandler }: LoginProps) => {
+const Login: React.FC<LoginProps> = ({ loginHandler }: LoginProps) => {
   // const currentContext = useQbInitializedDataContext();
   const [UserName, setUsername] = useState('');
   const [Password, setPassword] = useState('');

package/src/Presentation/themes/styles/_fonts.scss

@@ -1,2 +1,32 @@
 @import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,400;0,500;0,700;1,700&display=swap');
+////font-family: 'Ubuntu', sans-serif;
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');
+////font-family: 'Roboto', sans-serif;
+/*
+@font-face {
+  font-family: "Roboto-Regular";
+  src: url("../fonts/Roboto-Regular.eot");
+  src: local("☺"), url("../fonts/Roboto-Regular.woff") format("woff"),
+  url("../fonts/Roboto-Regular.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Roboto-Medium";
+  src: url("../fonts/Roboto-Medium.eot");
+  src: local("☺"), url("../fonts/Roboto-Medium.woff") format("woff"),
+  url("../fonts/Roboto-Medium.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Roboto-Bold";
+  src: url("../fonts/Roboto-Bold.eot");
+  src: local("☺"), url("../fonts/Roboto-Bold.woff") format("woff"),
+  url("../fonts/Roboto-Bold.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+*/

package/src/Presentation/themes/styles/_theme_dark.scss

@@ -1,4 +1,4 @@
-@use 'theme_colors_scheme' as *;
+@import 'theme_colors_scheme';
 // https://sass-lang.com/documentation/breaking-changes/css-vars
 
 html[data-theme='dark'] {

package/src/Presentation/themes/styles/_theme_light.scss

@@ -1,4 +1,4 @@
-@use 'theme_colors_scheme' as *;
+@import 'theme_colors_scheme';
 
 :root {
   --primary: #{$primary-500};

package/src/Presentation/themes/styles/_variables.scss

@@ -1,5 +1,5 @@
-@use "theme_light" as *;
-@use "theme_dark" as *;
+@import "theme_light";
+@import "theme_dark";
 
 $qb-min-width-screen-desktop: 980px;
 

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

@@ -1,6 +1,7 @@
-@use '../../themes/styles/mixins' as *;
+@import '../../themes/styles/mixins';
 
 .avatar {
+  @include applyBorderBox;
   display: flex;
   flex-shrink: 0;
   align-items: center;
@@ -11,11 +12,10 @@
   background-color: var(--disabled-elements);
   color: var(--secondary-text);
 
-  @include applyBorderBox;
-
   svg {
     height: 100%;
     width: 100%;
+    
     fill: var(--secondary-text);
     padding: 10px;
   }

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

@@ -1,11 +1,8 @@
-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,4 +1,3 @@
-import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import {
@@ -74,7 +73,6 @@ export const AvatarIcon: StoryDefault = {
 
 export const AvatarImage: StoryDefault = {
   args: {
-    // 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',
+    src: 'https://quickblox.com/wp-content/themes/QuickbloxTheme2021/img/chat-messaging.svg',
   },
 };

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.scss

@@ -1,4 +1,4 @@
-@use '../../themes/styles/mixins' as *;
+@import '../../themes/styles/mixins';
 
 .button {
   display: flex;

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

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

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

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

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

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

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

@@ -1,18 +1,17 @@
-@use '../../themes/styles/mixins' as *;
+@import '../../themes/styles/mixins';
 
 .dialog-banner {
-  background: var(--main-elements, #3978fc);
-  border-radius: 4px;
-  padding: 2px 8px 2px 8px;
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  min-width: 312px;
-  cursor: pointer;
-
-  @include applyBorderBox; // Переносится после всех основных свойств
+    @include applyBorderBox;
+    background: var(--main-elements, #3978fc);
+    border-radius: 4px;
+    padding: 2px 8px 2px 8px;
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    min-width: 312px;
+    cursor: pointer;
 
   &__text {
     color: var(--color-background, #ffffff);
@@ -27,3 +26,4 @@
     fill: var(--color-background, #ffffff);
   }
 }
+

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,5 +1,4 @@
-import React from 'react';
-import  DownSvg  from '../../icons/navigation/down.svg?react';
+import { ReactComponent as DownSvg } from '../../icons/navigation/down.svg';
 import './DialogBanner.scss';
 
 type DialogBannerProps = {

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

@@ -1,13 +1,12 @@
-@use '../../themes/styles/mixins' as *;
+@import '../../themes/styles/mixins';
 
 .dialog-item-preview {
+  @include applyBorderBox;
   display: flex;
   align-items: center;
   padding: 8px 16px;
   gap: 16px;
 
-  @include applyBorderBox; // Переместил после основных свойств
-
   &:hover {
     background: var(--divider);
   }
@@ -28,7 +27,7 @@
       justify-content: space-between;
 
       &-title {
-        font: var(--label-label-medium);
+        font: var(--label-label-medium, 500 12px/16px "Roboto", sans-serif);
         color: var(--main-text, #0b1b0f);
         overflow: hidden;
         white-space: nowrap;
@@ -37,7 +36,7 @@
 
       &-date {
         color: var(--tertiary-elements, #636d78);
-        font: var(--label-label-small);
+        font: var(--label-label-small, 500 11px/16px "Roboto", sans-serif);
       }
     }
 
@@ -50,7 +49,7 @@
       &-message {
         color: var(--secondary-text, #636d78);
         text-align: left;
-        font: var(--body-body-small);
+        font: var(--body-body-small, 400 12px/16px "Roboto", sans-serif);
         overflow: hidden;
         display: -webkit-box;
         -webkit-line-clamp: 2;

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 import DialogItemPreview from './DialogItemPreview';
@@ -73,7 +72,7 @@ const meta: Meta<typeof DialogItemPreview> = {
     active: {
       table: {
         defaultValue: {
-          summary: 'false',
+          summary: false,
         },
         type: { summary: 'boolean' },
       },

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

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react';
+import { ReactElement } from 'react';
 import cn from 'classnames';
 import { FunctionTypeVoidToVoid } from '../../../CommonTypes/BaseViewModel';
 import './DialogItemPreview.scss';
@@ -16,7 +16,7 @@ export type DialogItemPreviewProps = {
 };
 
 // eslint-disable-next-line react/function-component-definition
-const DialogItemPreview = ({
+const DialogItemPreview: React.FC<DialogItemPreviewProps> = ({
   avatar,
   title,
   date,

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

@@ -1,6 +1,8 @@
-@use '../../themes/styles/mixins' as *;
+@import '../../themes/styles/mixins';
 
 .dialog-window {
+  @include applyBorderBox;
+
   left: 0;
   top: 0;
   width: 100%;
@@ -9,8 +11,6 @@
   position: fixed;
   background-color: rgba(19, 29, 40, 0.8);
 
-  @include applyBorderBox; // Теперь после всех CSS-свойств
-
   &--disable {
     position: absolute;
     top: 0;
@@ -34,7 +34,7 @@
     border-radius: 4px;
     background-color: var(--main-background);
     box-shadow: 0 9px 15px 0 rgba(0, 0, 0, 0.04),
-    0 9px 46px 0 rgba(0, 0, 0, 0.08);
+      0 9px 46px 0 rgba(0, 0, 0, 0.08);
 
     @media (max-width: 767px) {
       width: 300px;
@@ -49,6 +49,7 @@
   &__close {
     width: 24px;
     height: 24px;
+
     fill: var(--secondary-elements);
     cursor: pointer;
   }

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

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

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

@@ -1,4 +1,4 @@
-import React, { ReactElement, ReactNode } from 'react';
+import React, { ReactElement } from 'react';
 import { createPortal } from 'react-dom';
 import cn from 'classnames';
 
@@ -9,7 +9,7 @@ import './DialogWindow.scss';
 interface DialogWindowProps {
   open: boolean;
   title: string;
-  children: ReactNode;
+  children: ReactElement | ReactElement[];
   onClose?: VoidFunction;
   className?: string;
   disableActions?: boolean;
@@ -22,7 +22,7 @@ export default function DialogWindow({
   title,
   className,
   disableActions = false,
-}: DialogWindowProps): React.JSX.Element | null {
+}: DialogWindowProps) {
   if (!open) return null;
 
   return createPortal(
@@ -40,5 +40,5 @@ export default function DialogWindow({
       </div>
     </div>,
     document.body,
-  ) as unknown as React.JSX.Element | null;
+  );
 }

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

@@ -1,4 +1,4 @@
-@use '../../themes/styles/mixins' as *;
+@import '../../themes/styles/mixins';
 
 .dropdown {
   width: 100%;

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

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

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

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

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

@@ -1,14 +1,14 @@
-@use '../../themes/styles/mixins' as *;
+@import '../../themes/styles/mixins';
 
 .dialog-header {
+  @include applyBorderBox;
+
   width: 100%;
   padding: 12px 16px 12px 20px;
   display: flex;
   align-items: center;
   gap: 33px;
 
-  @include applyBorderBox;
-
   &__icon {
     cursor: pointer;
     width: 24px;

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

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