quickblox-react-ui-kit 0.4.2-beta.4 → 0.4.4-alpha.5

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

@@ -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.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): ReactNode {
   if (!open) return null;
 
   return createPortal(
@@ -40,5 +40,5 @@ export default function DialogWindow({
       </div>
     </div>,
     document.body,
-  );
+  ) as unknown as ReactNode;
 }

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

@@ -1,14 +1,14 @@
-@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;

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

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

@@ -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/Message/Bubble/AudioBubble/AudioBubble.tsx

@@ -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/FileUrl/FileUrl.tsx

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

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

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();

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

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

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

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

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

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

@@ -4,6 +4,7 @@ import {
   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/index-ui.ts

@@ -50,6 +50,10 @@ import {
   QuickBloxUIKitDesktopLayoutProps,
 } from './CommonTypes/CommonTypes';
 
+import useQuickBloxUIKit from './hooks/useQuickBloxUIKit';
+import MessageItem from './Presentation/Views/Dialog/MessageItem/MessageItem';
+import AIRephraseWidget from './Presentation/Views/Dialog/AIWidgets/AIRephraseWidget/AIRephraseWidget';
+
 import {
   Avatar,
   Badge,
@@ -180,4 +184,7 @@ export {
   NewChatSvg,
   SearchSvg,
   ChatSvg,
+  useQuickBloxUIKit,
+  MessageItem,
+  AIRephraseWidget,
 };

package/src/index.scss

@@ -1,7 +1,7 @@
-@import 'Presentation/themes/styles/fonts';
-@import 'Presentation/themes/styles/theme_colors_scheme';
-@import 'Presentation/themes/styles/variables';
-@import 'Presentation/themes/styles/mixins';
+@use 'Presentation/themes/styles/fonts' as *;
+@use 'Presentation/themes/styles/theme_colors_scheme' as *;
+@use 'Presentation/themes/styles/variables' as *;
+@use 'Presentation/themes/styles/mixins' as *;
 
 .qb-uikit-layout * {
   box-sizing: border-box;

package/src/stories/Button.stories.ts

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { Button } from './Button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Example/Button',
+  component: Button,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: { onClick: fn() },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};

package/src/stories/Button.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import './button.css';
+
+export interface ButtonProps {
+  /** Is this the principal call to action on the page? */
+  primary?: boolean;
+  /** What background color to use */
+  backgroundColor?: string;
+  /** How large should the button be? */
+  size?: 'small' | 'medium' | 'large';
+  /** Button contents */
+  label: string;
+  /** Optional click handler */
+  onClick?: () => void;
+}
+
+/** Primary UI component for user interaction */
+export const Button = ({
+  primary = false,
+  size = 'medium',
+  backgroundColor,
+  label,
+  ...props
+}: ButtonProps) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      style={{ backgroundColor }}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};