quickblox-react-ui-kit 0.4.5-beta.2 → 0.4.5

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

@@ -1,27 +1,12 @@
-import ArrowLeftSvg from './arrow-left.svg?react';
-import ArrowRightSvg from './arrow-right.svg?react';
-import BackSvg from './back.svg?react';
-import CloseSvg from './close.svg?react';
-import DownSvg from './down.svg?react';
-import NextSVG from './next.svg?react';
-import LeaveSvg from './leave.svg?react';
-import MoreSvg from './more.svg?react';
-import PlusSvg from './plus.svg?react';
-import RefreshSvg from './refresh.svg?react';
-import SearchSvg from './search.svg?react';
-import SettingsFilledSvg from './settings-filled.svg?react';
-
-export {
-  ArrowLeftSvg,
-  ArrowRightSvg,
-  BackSvg,
-  CloseSvg,
-  DownSvg,
-  NextSVG,
-  LeaveSvg,
-  MoreSvg,
-  PlusSvg,
-  RefreshSvg,
-  SearchSvg,
-  SettingsFilledSvg
-};
+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/src/Presentation/icons/status/index.ts

@@ -1,17 +1,7 @@
-import ErrorSvg from './error.svg?react';
-import HelpSvg from './help.svg?react';
-import InformationSvg from './information.svg?react';
-import LoaderSvg from './loader.svg?react';
-import MentionSvg from './mention.svg?react';
-import SentSvg from './sent.svg?react';
-import ViewedDeliveredSvg from './viewed-delivered.svg?react';
-
-export {
-  ErrorSvg,
-  HelpSvg,
-  InformationSvg,
-  LoaderSvg,
-  MentionSvg,
-  SentSvg,
-  ViewedDeliveredSvg
-};
+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/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.scss

@@ -15,26 +15,23 @@ 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: 0;
+  padding: 0px 10px;
   width: 100%;
   border: 1px solid #008dde;
   margin: 1px;

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' },
       },
@@ -119,7 +118,7 @@ export const DialogItemPreviewDefault: Story = {
   },
   render: (args) => {
     // eslint-disable-next-line no-param-reassign
-    args.date = args.date ? new Date(args.date!).toLocaleDateString() : new Date().toLocaleDateString();
+    args.date = new Date(args.date!).toLocaleDateString();
 
     return <DialogItemPreview {...args} />;
   },
@@ -134,7 +133,6 @@ 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: {
@@ -143,7 +141,7 @@ export const DialogItemPreviewFullScreen: Story = {
   },
   render: (args) => {
     // eslint-disable-next-line no-param-reassign
-    args.date = new Date().toLocaleDateString();
+    args.date = new Date(args.date!).toLocaleDateString();
 
     return <DialogItemPreview {...args} />;
   },
@@ -166,7 +164,7 @@ export const DialogItemPreviewMobileScreen: Story = {
   },
   render: (args) => {
     // eslint-disable-next-line no-param-reassign
-    args.date = args.date ? new Date(args.date!).toLocaleDateString() : new Date().toLocaleDateString();
+    args.date = new Date(args.date!).toLocaleDateString();
 
     return <DialogItemPreview {...args} />;
   },
@@ -189,7 +187,7 @@ export const DialogItemPreviewMobileScreenIPad: Story = {
   },
   render: (args) => {
     // eslint-disable-next-line no-param-reassign
-    args.date = args.date ? new Date(args.date!).toLocaleDateString() : new Date().toLocaleDateString();
+    args.date = new Date(args.date!).toLocaleDateString();
 
     return <DialogItemPreview {...args} />;
   },

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,