npm - quickblox-react-ui-kit - Versions diffs - 0.4.5 → 0.5.0-beta.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (677) hide show

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

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

package/src/Presentation/ui-components/Loader/Loader.scss CHANGED Viewed

@@ -14,8 +14,6 @@
     height: 52px;
   }
-  animation: rotate 1s infinite linear;
   @keyframes rotate {
     from {
       transform: rotate(0deg);
@@ -24,4 +22,8 @@
       transform: rotate(360deg);
     }
   }
+  & {
+    animation: rotate 1s infinite linear;
+  }
 }

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

@@ -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 CHANGED Viewed

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

package/src/Presentation/ui-components/Message/Bubble/AudioBubble/AudioBubble.scss CHANGED Viewed

@@ -39,6 +39,7 @@
   align-items: flex-end;
   justify-content: flex-start;
   position: relative;
+  height: 12px;
   &__rectangle {
     background: var(--main-elements, #636d78);

package/src/Presentation/ui-components/Message/Bubble/AudioBubble/AudioBubble.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { ReactComponent as PlaySvg } from '../../../../icons/toggle/play.svg';
-import { ReactComponent as PauseSvg } from '../../../../icons/toggle/pause.svg';
+import PlaySvg from '../../../../icons/toggle/play.svg?react';
+import PauseSvg from '../../../../icons/toggle/pause.svg?react';
 import './AudioBubble.scss';

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

@@ -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 CHANGED Viewed

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

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

@@ -1,6 +1,7 @@
 .bubble-content-text {
   overflow-wrap: break-word;
   max-width: calc(var(--max-width-message-bubble) - 20px);
+  padding: 0 12px 0 12px;
   color: var(--main-tex, #0b1b0f);
   text-align: left;
@@ -11,8 +12,8 @@
   &__incoming {
     background: var(--incoming-background, #e4e6e8);
-    border-radius: 22px 22px 22px 0px;
-    padding: 8px 12px 8px 12px;
+    border-radius: 22px 22px 22px 0;
+    padding: 8px 0 8px 0;
     display: flex;
     flex-direction: row;
     gap: 10px;

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

@@ -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 CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

@@ -1,4 +1,5 @@
-import { ReactComponent as FileSvg } from '../../../icons/media/file.svg';
+import React from 'react';
+import FileSvg from '../../../icons/media/file.svg?react';
 import './FileUrl.scss';
 interface FileUrlProps {

package/src/Presentation/ui-components/Message/Message.tsx CHANGED Viewed

@@ -59,7 +59,7 @@ export default function Message({
           </div>
         </div>
       ) : (
-        <div>
+        <>
           <div className="message-item__incoming-mes">
             {avatar}
             <div className="message-item__incoming">
@@ -78,7 +78,7 @@ export default function Message({
               </div>
             </div>
           </div>
-        </div>
+        </>
       )}
     </div>
   );

package/src/Presentation/ui-components/Message/MessageCaption/MessageCaption.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import React from 'react';
-import { ReactComponent as ForwardSvg } from '../../../icons/actions/forward-filled.svg';
-import { ReactComponent as ReplySvg } from '../../../icons/actions/reply-filled.svg';
+import ForwardSvg from '../../../icons/actions/forward-filled.svg?react';
+import ReplySvg from '../../../icons/actions/reply-filled.svg?react';
 import './MessageCaption.scss';
 interface MessageCaptionProps {

package/src/Presentation/ui-components/Message/TimeAndStatus/TimeAndStatus.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import React from 'react';
-import { ReactComponent as StatusSentSvg } from '../../../icons/status/sent.svg';
-import { ReactComponent as StatusViewedDeliveredSvg } from '../../../icons/status/viewed-delivered.svg';
-import { ReactComponent as StatusErrorSvg } from '../../../icons/status/error.svg';
+import StatusSentSvg from '../../../icons/status/sent.svg?react';
+import StatusViewedDeliveredSvg from '../../../icons/status/viewed-delivered.svg?react';
+import  StatusErrorSvg  from '../../../icons/status/error.svg?react';
 import './TimeAndStatus.scss';
 const statusIconDictionary = {

package/src/Presentation/ui-components/MessageInput/AttachmentUploader/AttachmentUploader.tsx CHANGED Viewed

@@ -6,7 +6,7 @@ type AttachmentMessageProps = {
   disableAction: boolean;
 };
 // eslint-disable-next-line react/function-component-definition
-const AttachmentUploader: React.FC<AttachmentMessageProps> = ({
+const AttachmentUploader= ({
   icon,
   onChangeFile,
   disableAction,

package/src/Presentation/ui-components/MessageInput/MessageInput.tsx CHANGED Viewed

@@ -28,7 +28,7 @@ export type MessageInputProps = {
 };
 // eslint-disable-next-line react/function-component-definition
-const MessageInput: React.FC<MessageInputProps> = ({
+const MessageInput = ({
   value,
   onChange,
   onChanging,

package/src/Presentation/ui-components/MessageInput/ReplyMessagePreview/ReplyImagePreviewAttachment/ReplyImagePreviewAttachment.tsx CHANGED Viewed

@@ -6,10 +6,7 @@ type ReplyImagePreviewAttachmentProps = {
   imageFile: FileEntity;
 };
 // eslint-disable-next-line react/function-component-definition
-const ReplyImagePreviewAttachment: React.FC<
-  ReplyImagePreviewAttachmentProps
-  // eslint-disable-next-line react/function-component-definition
-> = ({ imageFile }: ReplyImagePreviewAttachmentProps) => {
+const ReplyImagePreviewAttachment = ({ imageFile }: ReplyImagePreviewAttachmentProps) => {
   return (
     <div>
       <a href={imageFile.url} download="file" target="_blank" rel="noreferrer">

package/src/Presentation/ui-components/MessageInput/ReplyMessagePreview/ReplyMessagePreview.tsx CHANGED Viewed

@@ -21,7 +21,7 @@ function trimMessage(messageText: string) {
 }
 // eslint-disable-next-line react/function-component-definition
-const ReplyMessagePreview: React.FC<ReplyMessagePreviewProps> = ({
+const ReplyMessagePreview = ({
   messages,
   userNameSentMessage,
   onClose,

package/src/Presentation/ui-components/MessageInput/VoiceRecordingProgress/VoiceRecordingProgress.tsx CHANGED Viewed

@@ -9,13 +9,13 @@ type VoiceRecordingProgressProps = {
   onTouch?: FunctionTypeVoidToVoid;
 };
 // eslint-disable-next-line react/function-component-definition
-const VoiceRecordingProgress: React.FC<VoiceRecordingProgressProps> = ({
+const VoiceRecordingProgress = ({
   startStatus,
   longRecInSec,
   onClick,
   onTouch,
 }: VoiceRecordingProgressProps) => {
-  let timerId: NodeJS.Timer | undefined;
+  let timerId: NodeJS.Timeout | null = null;
   const [currentTime, setCurrentTime] = useState(Date.now());
   const [timeString, setTimeString] = useState('00:00:00');
   const [startTime] = useState(Date.now());
@@ -34,8 +34,8 @@ const VoiceRecordingProgress: React.FC<VoiceRecordingProgressProps> = ({
   const stopTimer = () => {
     if (timerId) {
-      clearTimeout(timerId);
-      timerId = undefined;
+      clearInterval(timerId as NodeJS.Timeout);
+      timerId = null;
     }
     if (onClick) onClick();
     if (onTouch) onTouch();

package/src/Presentation/ui-components/MessageSeparator/MessageSeparator.scss CHANGED Viewed

@@ -1,30 +1,31 @@
-@import '../../themes/styles/mixins';
+@use '../../themes/styles/mixins' as *;
 .system-date-banner-chat-banner {
-  @include applyBorderBox;
   background: var(--incoming-background);
   border-radius: 30px;
-  padding: 2px 8px 2px 8px;
+  padding: 2px 8px;
   display: flex;
   gap: 10px;
   align-items: center;
   justify-content: center;
   color: var(--secondary-text);
   text-align: center;
-  font: var(--label-label-small, 500 11px/16px "Roboto", sans-serif);
+  font: var(--label-label-small);
+  @include applyBorderBox; // Теперь после всех CSS-свойств
 }
 .system-message-chat-banner {
-    padding: 2px 8px 2px 8px;
-    display: flex;
-    flex-direction: row;
-    gap: 10px;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    color: var(--secondary-text);
-    text-align: center;
-    font: var(--label-label-small, 500 11px/16px "Roboto", sans-serif);
-}
+  padding: 2px 8px;
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--secondary-text);
+  text-align: center;
+  font: var(--label-label-small);
+  @include applyBorderBox; // Теперь после всех CSS-свойств
+}

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

@@ -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 CHANGED Viewed

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

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

@@ -1,4 +1,4 @@
-@import '../../themes/styles/mixins';
+@use '../../themes/styles/mixins' as *;
 .placeholder {
   display: flex;
@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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',
   },
 };

package/src/Presentation/ui-components/PreviewFileMessage/PreviewFileMessage.tsx CHANGED Viewed

@@ -1,3 +1,4 @@
+import React from 'react';
 import cn from 'classnames';
 import { TextDocumentSvg, AudioFileSvg, PlaySvg } from '../../icons';
 import './PreviewFileMessage.scss';

package/src/Presentation/ui-components/SettingsItem/SettingsItem.scss CHANGED Viewed

@@ -1,7 +1,6 @@
-@import '../../themes/styles/mixins';
+@use '../../themes/styles/mixins' as *;
 .settings-item {
-  @include applyBorderBox;
   background-color: var(--color-background);
   &__body {
@@ -65,5 +64,12 @@
   &__icon {
     width: 24px;
     height: 24px;
+    svg {
+      width: 24px;
+      height: 24px;
+    }
   }
+  @include applyBorderBox; // Теперь после всех CSS-свойств
 }

package/src/Presentation/ui-components/SettingsItem/SettingsItem.stories.tsx CHANGED Viewed

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

package/src/Presentation/ui-components/SettingsItem/SettingsItem.tsx CHANGED Viewed

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

package/src/Presentation/ui-components/TextField/TextField.scss CHANGED Viewed

@@ -1,4 +1,4 @@
-@import '../../themes/styles/mixins';
+@use '../../themes/styles/mixins' as *;
 .text-field {
   @include applyBorderBox;
@@ -12,7 +12,7 @@
   }
   &__wrapper {
-    background-color: var(----color-background);
+    background-color: var(--color-background);
     display: flex;
     align-items: center;

package/src/Presentation/ui-components/TextField/TextField.stories.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import TextField from './TextField';
@@ -59,7 +60,7 @@ const meta: Meta<typeof TextField> = {
     loading: {
       table: {
         defaultValue: {
-          summary: false,
+          summary: 'false',
         },
       },
       description: 'Displays the load',
@@ -68,7 +69,7 @@ const meta: Meta<typeof TextField> = {
       table: {
         type: { summary: 'boolean' },
         defaultValue: {
-          summary: false,
+          summary: 'false',
         },
       },
       description: 'Active',

package/src/Presentation/ui-components/TextField/TextField.tsx CHANGED Viewed

@@ -1,9 +1,10 @@
-import {
+import React, {
   DetailedHTMLProps,
   ForwardedRef,
   InputHTMLAttributes,
   ReactElement,
   forwardRef,
+  JSX,
   useId,
 } from 'react';
 import cn from 'classnames';
@@ -26,8 +27,8 @@ interface TextFieldProps extends Omit<HTMLInputProps, 'onChange'> {
   onChange: (value: string) => void;
 }
-const TextField = forwardRef(
-  (
+const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
+  function TextField(
     {
       label,
       icon,
@@ -40,7 +41,7 @@ const TextField = forwardRef(
       ...inputProps
     }: TextFieldProps,
     ref: ForwardedRef<HTMLInputElement>,
-  ) => {
+  ): JSX.Element {
     const defaultId = useId();
     return (

package/src/Presentation/ui-components/Toast/Toast.stories.tsx CHANGED Viewed

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

package/src/Presentation/ui-components/Toast/ToastProvider.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { ReactNode, createContext } from 'react';
+import React, { ReactNode, createContext } from 'react';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';

package/src/Presentation/ui-components/UserListItem/UserListItem.stories.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import UserListItem from './UserListItem';
@@ -38,7 +38,7 @@ const meta = {
       table: {
         type: { summary: 'boolean' },
         defaultValue: {
-          summary: false,
+          summary: 'false',
         },
       },
       description: 'Active',
@@ -47,7 +47,7 @@ const meta = {
       table: {
         type: { summary: 'boolean' },
         defaultValue: {
-          summary: false,
+          summary: 'false',
         },
       },
       description: 'Checkbox',

package/src/Presentation/ui-components/UserListItem/UserListItem.tsx CHANGED Viewed

@@ -1,3 +1,4 @@
+import React from 'react';
 import cn from 'classnames';
 import Avatar from '../Avatar/Avatar';