quickblox-react-ui-kit 0.4.5 → 0.5.0-beta.1

package/src/Presentation/layouts/Desktop/QuickBloxUIKitDesktopLayout.tsx

@@ -47,14 +47,11 @@ import CreateNewDialogFlow from '../../Views/Flow/CreateDialogFlow/CreateNewDial
 import useQuickBloxUIKit from '../../../hooks/useQuickBloxUIKit';
 import { QuickBloxUIKitDesktopLayoutProps } from '../../../CommonTypes/CommonTypes';
 
-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,
+const QuickBloxUIKitDesktopLayout = ({
+  theme,
+  AITranslate,
+  AIRephrase,
+  AIAssist,
   uikitHeightOffset = '0px',
 }: QuickBloxUIKitDesktopLayoutProps) => {
   const {
@@ -317,8 +314,8 @@ const QuickBloxUIKitDesktopLayout: React.FC<
 
   const getDialogAvatar = (
     currentDialog: PreviewDialogViewModel,
-  ): JSX.Element | undefined => {
-    let AvatarComponent: JSX.Element | undefined;
+  ): React.JSX.Element | undefined => {
+    let AvatarComponent: React.JSX.Element | undefined;
 
     if (
       currentDialog.entity.type === DialogType.group ||
@@ -435,34 +432,32 @@ const QuickBloxUIKitDesktopLayout: React.FC<
                     />
                   ) : null
                 }
-                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"
-                      />
-                    )}
-                  </>
-                )}
+                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"
+                    />
+                  )
+                }
               />
             ) : null
           }

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/layouts/TestStage/LoginView/Login.tsx

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

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

@@ -1,32 +1,2 @@
 @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 @@
-@import 'theme_colors_scheme';
+@use 'theme_colors_scheme' as *;
 // 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 @@
-@import 'theme_colors_scheme';
+@use 'theme_colors_scheme' as *;
 
 :root {
   --primary: #{$primary-500};

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

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

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

@@ -1,7 +1,6 @@
-@import '../../themes/styles/mixins';
+@use '../../themes/styles/mixins' as *;
 
 .avatar {
-  @include applyBorderBox;
   display: flex;
   flex-shrink: 0;
   align-items: center;
@@ -12,10 +11,11 @@
   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,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.scss

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

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

@@ -1,17 +1,18 @@
-@import '../../themes/styles/mixins';
+@use '../../themes/styles/mixins' as *;
 
 .dialog-banner {
-    @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;
+  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; // Переносится после всех основных свойств
 
   &__text {
     color: var(--color-background, #ffffff);
@@ -26,4 +27,3 @@
     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,4 +1,5 @@
-import { ReactComponent as DownSvg } from '../../icons/navigation/down.svg';
+import React from 'react';
+import  DownSvg  from '../../icons/navigation/down.svg?react';
 import './DialogBanner.scss';
 
 type DialogBannerProps = {

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

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

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';
@@ -16,7 +16,7 @@ export type DialogItemPreviewProps = {
 };
 
 // eslint-disable-next-line react/function-component-definition
-const DialogItemPreview: React.FC<DialogItemPreviewProps> = ({
+const DialogItemPreview = ({
   avatar,
   title,
   date,

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

@@ -1,8 +1,6 @@
-@import '../../themes/styles/mixins';
+@use '../../themes/styles/mixins' as *;
 
 .dialog-window {
-  @include applyBorderBox;
-
   left: 0;
   top: 0;
   width: 100%;
@@ -11,6 +9,8 @@
   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,7 +49,6 @@
   &__close {
     width: 24px;
     height: 24px;
-
     fill: var(--secondary-elements);
     cursor: pointer;
   }

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

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react';
+import React, { ReactElement, ReactNode } 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: ReactElement | ReactElement[];
+  children: ReactNode;
   onClose?: VoidFunction;
   className?: string;
   disableActions?: boolean;
@@ -22,7 +22,7 @@ export default function DialogWindow({
   title,
   className,
   disableActions = false,
-}: DialogWindowProps) {
+}: 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 React.JSX.Element | null;
 }

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

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

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

@@ -1,19 +1,24 @@
-@import '../../themes/styles/mixins';
+@use '../../themes/styles/mixins' as *;
 
 .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;
     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';