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

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

@@ -1,4 +1,5 @@
 import React, { ReactElement } from 'react';
+import cn from 'classnames';
 import Avatar from '../Avatar/Avatar';
 import CheckBox from '../CheckBox/CheckBox';
 import MessageCaption from './MessageCaption/MessageCaption';
@@ -54,12 +55,16 @@ export default function Message({
                 subtype={subtype}
                 userName={userName}
               />
-              {children}
+              <div className={cn(null, {
+                            'reply-forward-message': subtype === 'reply' || subtype === 'forward'}
+              )}>
+                {children}
+              </div>
             </div>
           </div>
         </div>
       ) : (
-        <div>
+        <>
           <div className="message-item__incoming-mes">
             {avatar}
             <div className="message-item__incoming">
@@ -70,7 +75,14 @@ export default function Message({
               />
               <div className="message-item__incoming__chat">
                 <div className="message-item__incoming__chat__bubble">
-                  {children}
+                  {
+                    (subtype === 'reply' || subtype === 'forward')
+                      ?
+                    <div className='reply-forward-message'>
+                      {children}
+                    </div>
+                    : children
+                  }
                   {bottomPart}
                 </div>
                 {additionalPart}
@@ -78,7 +90,7 @@ export default function Message({
               </div>
             </div>
           </div>
-        </div>
+        </>
       )}
     </div>
   );

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

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

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

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

@@ -2,6 +2,10 @@ $message-view-container-header-min-height: 64px;
 $message-view-container-chat-input-min-height: 54px;
 .chat-container{
   width: 100%;
+  &__send-icon {
+    display: flex;
+    align-items: center;
+  }
   &__icon{
     width: 24px;
     height: 24px;
@@ -120,7 +124,7 @@ $message-view-container-chat-input-min-height: 54px;
   justify-content: flex-start;
 }
 .type-message textarea{
-  color: var(--input-elements);
+  color: var(--main-text);
   font: var(--body-body-large);
   border: none;
   outline: none;

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

@@ -104,7 +104,7 @@ export const MessageInputDefault: StoryObj<typeof MessageInput> = {
   name: 'MessageInput Default',
   args: {
     value: '',
-    enableVoice: false,
+    enableVoice: true,
     disableAttachment: false,
     loading: false,
   },
@@ -115,6 +115,8 @@ export const MessageInputWithVoiceMessage: StoryObj<typeof MessageInput> = {
   args: {
     ...MessageInputDefault.args,
     enableVoice: true,
+    onVoice: () => {
+    }
   },
 };
 
@@ -141,5 +143,3 @@ export const MessageInputLoadingState: StoryObj<typeof MessageInput> = {
     loading: true,
   },
 };
-
-// Дополните примеры в соответствии с вашими требованиями

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

@@ -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,
@@ -69,30 +69,30 @@ const MessageInput: React.FC<MessageInputProps> = ({
   }
 
   return (
-    <div className={cn('chat-container', className)}>
-      {previewMessage}
-      <div
-        onBlur={() => {
-          if (!(value && value.length > 0)) {
-            setVoiceMessage(true);
-          }
-        }}
-        className="chat-input"
-      >
-        <AttachmentUploader
-          disableAction={disableActions}
-          icon={
-            <AttachmentSvg
-              className={cn('chat-container__icon', {
-                'chat-container__icon--mute': disableAttachment || loading,
-                'chat-container__icon--disable': disableActions,
-              })}
-            />
-          }
-          onChangeFile={onAttachment}
-        />
-        {!enableVoice && (
-          <div className="input-text-message type-message">
+      <div className={cn('chat-container', className)}>
+        {previewMessage}
+        <div
+          onBlur={() => {
+            if (!(value && value.length > 0)) {
+              setVoiceMessage(true);
+            }
+          }}
+          className="chat-input"
+        >
+          <AttachmentUploader
+            disableAction={disableActions}
+            icon={
+              <AttachmentSvg
+                className={cn('chat-container__icon', {
+                  'chat-container__icon--mute': disableAttachment || loading,
+                  'chat-container__icon--disable': disableActions,
+                })}
+              />
+            }
+            onChangeFile={onAttachment}
+          />
+          {!enableVoice && (
+            <div className="input-text-message type-message">
             <textarea
               disabled={loading}
               value={value}
@@ -108,53 +108,54 @@ const MessageInput: React.FC<MessageInputProps> = ({
               }}
               placeholder={placeholder || 'Type message'}
             />
-            {rephrase}
-          </div>
-        )}
+              {rephrase}
+            </div>
+          )}
 
-        {enableVoice && (
-          <VoiceRecordingProgress
-            startStatus={enableVoice}
-            longRecInSec={60}
-            onClick={() => {
-              if (onVoice) {
-                onVoice();
-              }
-            }}
-          />
-        )}
-        {!isVoiceMessage && !loading && (
-          <div>
-            <SendSvg
-              className={cn('chat-container__icon__send', {
-                'chat-container__icon--mute': loading,
-                'chat-container__icon--disable': disableActions,
-              })}
-              onClick={() => {
-                sendTextMessageActions();
-              }}
-            />
-          </div>
-        )}
-        {loading ? (
-          <Loader size="sm" className="chat-container__loader" />
-        ) : (
-          isVoiceMessage && (
-            <VoiceSvg
-              className={cn('chat-container__icon', {
-                'chat-container__icon--red': enableVoice,
-                'chat-container__icon--disable': disableActions,
-              })}
+          {enableVoice && (
+            <VoiceRecordingProgress
+              startStatus={enableVoice}
+              longRecInSec={60}
               onClick={() => {
                 if (onVoice) {
                   onVoice();
                 }
               }}
             />
-          )
-        )}
+          )}
+          {!isVoiceMessage && !loading && (
+            <div className="chat-container__send-icon">
+              <SendSvg
+                className={cn('chat-container__icon__send', {
+                  'chat-container__icon--mute': loading,
+                  'chat-container__icon--disable': disableActions,
+                })}
+                onClick={() => {
+                  sendTextMessageActions();
+                }}
+              />
+            </div>
+          )}
+          {loading ? (
+            <Loader size="sm" className="chat-container__loader" />
+          ) : (
+            isVoiceMessage && (
+              <VoiceSvg
+                className={cn('chat-container__icon', {
+                  'chat-container__icon--red': enableVoice,
+                  'chat-container__icon--disable': disableActions,
+                })}
+                onClick={() => {
+                  if (onVoice) {
+                    onVoice();
+                  }
+                }}
+              />
+            )
+          )}
+        </div>
       </div>
-    </div>
+
   );
 };
 

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

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

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

@@ -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();
@@ -49,7 +49,7 @@ const VoiceRecordingProgress: React.FC<VoiceRecordingProgressProps> = ({
       stopTimer();
     }, longRec * 1000);
 
-    if (timerId === undefined) {
+    if (!timerId) {
       timerId = setInterval(() => {
         setCurrentTime(Date.now());
       }, 1000);

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

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

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

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

@@ -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';
 
@@ -72,6 +73,7 @@ export const PreviewFileMessageImage: StoryDefault = {
   name: 'PreviewFileMessage Image',
   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',
     name: 'screenshot.jpg',
   },
 };

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

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

@@ -1,8 +1,6 @@
-@import '../../themes/styles/mixins';
+@use '../../themes/styles/mixins' as *;
 
 .settings-item {
-  @include applyBorderBox;
-  background-color: var(--color-background);
 
   &__body {
     display: flex;
@@ -65,5 +63,12 @@
   &__icon {
     width: 24px;
     height: 24px;
+
+    svg {
+      width: 24px;
+      height: 24px;
+    }
   }
+
+  @include applyBorderBox;
 }

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import SettingsItem from './SettingsItem';
@@ -107,13 +108,13 @@ export const SettingsItemNotification: StoryDefault = {
         }}
       />
     ),
-    rightSection: (
-      <CloseSvg
-        style={{
-          cursor: 'pointer',
-        }}
-      />
-    ),
+    // rightSection: (
+    //   <CloseSvg
+    //     style={{
+    //       cursor: 'pointer',
+    //     }}
+    //   />
+    // ),
   },
 };
 

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

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

@@ -1,10 +1,9 @@
-@import '../../themes/styles/mixins';
+@use '../../themes/styles/mixins' as *;
 
 .text-field {
   @include applyBorderBox;
 
   &__label {
-    font-family: 'Roboto';
     font-weight: 400;
     font-size: 14px;
     line-height: 20px;
@@ -12,7 +11,6 @@
   }
 
   &__wrapper {
-    background-color: var(----color-background);
 
     display: flex;
     align-items: center;
@@ -29,6 +27,9 @@
 
   &__icon {
     margin-right: 6px;
+    padding: 0;
+    display: flex;
+    align-items: center;
   }
 
   &__input {
@@ -36,11 +37,12 @@
     border: none;
     outline: none;
 
-    font-family: 'Roboto';
     font-weight: 400;
     font-size: 16px;
     line-height: 24px;
     letter-spacing: 0.15px;
+    background: var(--main-background);
+    color: var(--color-font);
 
     &:disabled {
       background-color: transparent;

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

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

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

@@ -7,7 +7,7 @@
   padding: 4px 12px;
   opacity: 60% !important;
   border-radius: 4px;
-  background-color: var(--toast-color);
+  background-color: var(--caption);
 
   &__body {
     padding: 0;
@@ -16,7 +16,7 @@
     font-size: 12px;
     line-height: 16px;
     letter-spacing: 0.5px;
-    color: var(--main-background);
+    color: var(--secondary-elements);
     text-align: center;
   }
 }

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

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

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