quickblox-react-ui-kit 0.3.0-beta.2 → 0.3.0-beta.3

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

@@ -27,6 +27,7 @@ export default function AudioBubble({
 
   const handleAudioEnd = () => {
     setIsPlaying(false);
+    setSecondsElapsed(0);
   };
 
   // eslint-disable-next-line @typescript-eslint/no-unsafe-call,consistent-return
@@ -123,6 +124,16 @@ export default function AudioBubble({
     return divElements;
   };
 
+  const formatTime = (time: number): string => {
+    const minutes = Math.floor((time % 3600) / 60);
+    const seconds = Math.floor(time % 60);
+
+    const formattedMinutes = minutes.toString().padStart(2, '0');
+    const formattedSeconds = seconds.toString().padStart(2, '0');
+
+    return `${formattedMinutes}:${formattedSeconds}`;
+  };
+
   return (
     <div className={`audio-bubble-background__${type}`}>
       <audio ref={audioRef} className="audio-body" preload="auto">
@@ -139,8 +150,11 @@ export default function AudioBubble({
             <PlaySvg className="audio-body__controls--color" />
           )}
         </div>
-        <div className="equalizer">
-          {isPlaying ? renderRandomEqualizer() : renderEqualizer(fileUid!)}
+        <div className="audio-player__equalizer-time">
+          <div className="equalizer">
+            {isPlaying ? renderRandomEqualizer() : renderEqualizer(fileUid!)}
+          </div>
+          <div className="time-play">{formatTime(secondsElapsed)}</div>
         </div>
       </div>
     </div>

package/src/Presentation/ui-components/Message/Bubble/VideoBubble/VideoBubble.scss

@@ -4,6 +4,13 @@
   width: var(--max-width-audio-message);
   padding: 0;
   border-radius: 4px;
+
+  &__link {
+    color: var(--secondary-text, #636d78);
+    text-align: left;
+    font: var(--label-label-small);
+    height: 16px;
+  }
 }
 
 .message-attachment-video {
@@ -16,3 +23,5 @@
   width: var(--max-width-audio-message);
   max-height: 160px;
 }
+
+

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

@@ -13,24 +13,22 @@ export default function VideoBubble({
 }: VideoBubbleProps) {
   return (
     <div className={className}>
-      <div>
-        <div className="message-attachment-video">
-          <video
-            className="message-attachment-video-body"
-            controls
-            key={title}
-            playsInline
-            src={href}
-          >
-            <a href={href} download>
-              Download
-            </a>
-          </video>
-        </div>
-        <a href={href} download>
-          Download
-        </a>
+      <div className="message-attachment-video">
+        <video
+          className="message-attachment-video-body"
+          controls
+          key={title}
+          playsInline
+          src={href}
+        >
+          <a href={href} download>
+            Download
+          </a>
+        </video>
       </div>
+      <a href={href} download className="message-attachment-video-body__link">
+        Download
+      </a>
     </div>
   );
 }

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

@@ -76,7 +76,8 @@ function getChildrenByType(type: string, children?: ReactElement) {
 }
 // const meta: Meta<typeof Message> = {
 const meta: Meta<MessageProps> = {
-  title: 'Message',
+  tags: ['autodocs'],
+  title: '@quickblox-react-ui-kit/Presentation/ui-components/Message',
   component: Message,
   decorators: [
     (StoryFn, context) => {
@@ -126,11 +127,66 @@ const meta: Meta<MessageProps> = {
     // ),
   },
   argTypes: {
+    userName: {
+      table: {
+        type: { summary: 'string' },
+        defaultValue: {
+          summary: '',
+        },
+      },
+      description: 'User name',
+    },
+    avatar: {
+      control: false,
+      table: {
+        type: { summary: 'ReactElement' },
+      },
+      description: 'Message sender avatar',
+    },
+    time: {
+      table: {
+        type: { summary: 'string' },
+        defaultValue: {
+          summary: '',
+        },
+      },
+      description: 'Time of sending the message',
+    },
     type: {
+      table: {
+        type: { summary: 'outgoing | incoming' },
+        defaultValue: {
+          summary: 'incoming',
+        },
+      },
       control: 'radio',
       options: ['incoming', 'outgoing'],
+      description: 'The type of message can be either outgoing or incoming',
+    },
+    enableSelect: {
+      description: 'Enables the option to select a message',
+    },
+    isSelect: {
+      description: 'The status of message selection',
+    },
+    disabled: {
+      description: 'Active',
+    },
+    status: {
+      table: {
+        type: { summary: 'sent | delivered | viewed | error' },
+        defaultValue: {
+          summary: '',
+        },
+      },
+      control: 'select',
+      options: ['sent', 'delivered', 'viewed', 'error'],
+      description: 'The status of the message',
     },
     children: {
+      table: {
+        type: { summary: 'ReactElement' },
+      },
       description: 'Message bubble',
       control: 'select',
       options: [
@@ -177,6 +233,29 @@ const meta: Meta<MessageProps> = {
         ),
       },
     },
+    subtype: {
+      description: 'Additional message subtype',
+    },
+    onSelect: {
+      table: {
+        type: { summary: 'function' },
+      },
+      description: 'The function responsible for message selection',
+    },
+    bottomPart: {
+      table: {
+        type: { summary: 'ReactElement' },
+      },
+      control: false,
+      description: 'The bottom part of the message layout',
+    },
+    additionalPart: {
+      table: {
+        type: { summary: 'ReactElement' },
+      },
+      control: false,
+      description: 'Additional section of the message layout',
+    },
   },
 };
 

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

@@ -5,12 +5,16 @@ import ReplyMessagePreview from './ReplyMessagePreview/ReplyMessagePreview';
 import { Stubs } from '../../../Data/Stubs';
 
 const meta: Meta<typeof MessageInput> = {
-  title: 'MessageInput',
+  title: '@quickblox-react-ui-kit/Presentation/ui-components/MessageInput',
   component: MessageInput,
+  tags: ['autodocs'],
   parameters: {
     layout: 'centered',
   },
   argTypes: {
+    rephrase: {
+      control: false,
+    },
     value: {
       control: 'text',
       description: 'Input value',
@@ -96,7 +100,8 @@ const meta: Meta<typeof MessageInput> = {
 
 export default meta;
 
-export const Default: StoryObj<typeof MessageInput> = {
+export const MessageInputDefault: StoryObj<typeof MessageInput> = {
+  name: 'MessageInput Default',
   args: {
     value: '',
     enableVoice: false,
@@ -105,16 +110,18 @@ export const Default: StoryObj<typeof MessageInput> = {
   },
 };
 
-export const WithVoiceMessage: StoryObj<typeof MessageInput> = {
+export const MessageInputWithVoiceMessage: StoryObj<typeof MessageInput> = {
+  name: 'MessageInput With Voice Message',
   args: {
-    ...Default.args,
+    ...MessageInputDefault.args,
     enableVoice: true,
   },
 };
 
-export const WithPreview: StoryObj<typeof MessageInput> = {
+export const MessageInputWithPreview: StoryObj<typeof MessageInput> = {
+  name: 'MessageInput With Preview',
   args: {
-    ...Default.args,
+    ...MessageInputDefault.args,
     previewMessage: (
       <ReplyMessagePreview
         messages={[Stubs.initializeMessagesWithMockData()[0]]}
@@ -127,9 +134,10 @@ export const WithPreview: StoryObj<typeof MessageInput> = {
   },
 };
 
-export const LoadingState: StoryObj<typeof MessageInput> = {
+export const MessageInputLoadingState: StoryObj<typeof MessageInput> = {
+  name: 'MessageInput Loading State',
   args: {
-    ...Default.args,
+    ...MessageInputDefault.args,
     loading: true,
   },
 };

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

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import MessageSeparator from './MessageSeparator';
 
 const meta = {
-  title: 'MessageSeparator',
+  title: '@quickblox-react-ui-kit/Presentation/ui-components/MessageSeparator',
   component: MessageSeparator,
   tags: ['autodocs'],
   parameters: {
@@ -38,6 +38,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const MessageSeparatorDate: Story = {
+  name: 'MessageSeparator Date',
   args: {
     text: '2024-01-26T00:00:00.000Z',
     type: 'date',
@@ -45,6 +46,7 @@ export const MessageSeparatorDate: Story = {
 };
 
 export const MessageSeparatorSystem: Story = {
+  name: 'MessageSeparator System',
   args: {
     text: 'User created chat',
     type: 'system',

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

@@ -10,16 +10,16 @@ import {
   BannedSvg,
   SearchSvg,
 } from '../../icons';
-import Loader from '../Loader/Loader';
 
 const meta: Meta<typeof Placeholder> = {
-  title: 'Placeholder',
+  title: '@quickblox-react-ui-kit/Presentation/ui-components/Placeholder',
   component: Placeholder,
   tags: ['autodocs'],
   parameters: {
     layout: 'centered',
   },
   args: {
+    text: ['Text for placeholder'],
     className: '',
     onRetry: undefined,
     icon: undefined,
@@ -33,7 +33,6 @@ const meta: Meta<typeof Placeholder> = {
         'Muted',
         'Banned',
         'Search',
-        'Loader',
         'Error',
       ],
       control: 'select',
@@ -44,7 +43,6 @@ const meta: Meta<typeof Placeholder> = {
         Muted: <MutedSvg />,
         Banned: <BannedSvg />,
         Search: <SearchSvg />,
-        Loader: <Loader size="lg" />,
         Error: <ErrorSvg />,
       },
       table: {
@@ -81,14 +79,12 @@ type StoryDefault = StoryObj<typeof meta>;
 
 export const PlaceholderDefault: StoryDefault = {
   args: {
-    text: ['The are no massage'],
     icon: <PublicChannelSvg />,
   },
 };
 
 export const PlaceholderError: StoryDefault = {
   args: {
-    text: ['Something wrong'],
     icon: <ErrorSvg />,
     onRetry: () => undefined,
   },

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

@@ -2,7 +2,8 @@ import type { Meta, StoryObj } from '@storybook/react';
 import PreviewFileMessage from './PreviewFileMessage';
 
 const meta: Meta<typeof PreviewFileMessage> = {
-  title: 'PreviewFileMessage',
+  title:
+    '@quickblox-react-ui-kit/Presentation/ui-components/PreviewFileMessage',
   tags: ['autodocs'],
   component: PreviewFileMessage,
   parameters: {
@@ -32,6 +33,12 @@ const meta: Meta<typeof PreviewFileMessage> = {
       },
       description: 'Additional classes',
     },
+    src: {
+      table: {
+        type: { summary: 'string' },
+      },
+      description: 'Source file',
+    },
   },
 };
 
@@ -39,12 +46,14 @@ export default meta;
 type StoryDefault = StoryObj<typeof meta>;
 
 export const PreviewFileMessageDefault: StoryDefault = {
+  name: 'PreviewFileMessage Default',
   args: {
     name: 'text document.txt',
   },
 };
 
 export const PreviewFileMessageAudio: StoryDefault = {
+  name: 'PreviewFileMessage Audio',
   args: {
     type: 'audio',
     name: 'audio.mp3',
@@ -52,6 +61,7 @@ export const PreviewFileMessageAudio: StoryDefault = {
 };
 
 export const PreviewFileMessageVideo: StoryDefault = {
+  name: 'PreviewFileMessage Video',
   args: {
     type: 'video',
     name: 'video.mp4',
@@ -59,6 +69,7 @@ export const PreviewFileMessageVideo: StoryDefault = {
 };
 
 export const PreviewFileMessageImage: StoryDefault = {
+  name: 'PreviewFileMessage Image',
   args: {
     src: 'https://quickblox.com/wp-content/themes/QuickbloxTheme2021/img/chat-messaging.svg',
     name: 'screenshot.jpg',

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

@@ -11,7 +11,7 @@ import {
 } from '../../icons';
 
 const meta: Meta<typeof SettingsItem> = {
-  title: 'Settings Item',
+  title: '@quickblox-react-ui-kit/Presentation/ui-components/SettingsItem',
   component: SettingsItem,
   tags: ['autodocs'],
   parameters: {
@@ -46,6 +46,7 @@ const meta: Meta<typeof SettingsItem> = {
       description: 'Format plug svg or React element ',
     },
     rightSection: {
+      control: false,
       table: {
         defaultValue: {
           summary: 'ReactElement | ReactElement[]',
@@ -79,6 +80,7 @@ export default meta;
 type StoryDefault = StoryObj<typeof meta>;
 
 export const SettingsItemDefault: StoryDefault = {
+  name: 'SettingsItem Default',
   args: {
     title: 'Search in dialog',
     icon: (
@@ -92,6 +94,7 @@ export const SettingsItemDefault: StoryDefault = {
 };
 
 export const SettingsItemNotification: StoryDefault = {
+  name: 'SettingsItem Notification',
   args: {
     title: 'Notification',
     icon: (
@@ -112,6 +115,7 @@ export const SettingsItemNotification: StoryDefault = {
 };
 
 export const SettingsItemMembers: StoryDefault = {
+  name: 'SettingsItem Members',
   args: {
     title: 'Notification',
     icon: (

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

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import TextField from './TextField';
 
 const meta: Meta<typeof TextField> = {
-  title: 'TextField',
+  title: '@quickblox-react-ui-kit/Presentation/ui-components/TextField',
   component: TextField,
   tags: ['autodocs'],
   parameters: {
@@ -50,6 +50,7 @@ const meta: Meta<typeof TextField> = {
       description: 'Text field label',
     },
     icon: {
+      control: false,
       table: {
         type: { summary: 'svg' },
       },
@@ -84,9 +85,12 @@ const meta: Meta<typeof TextField> = {
 export default meta;
 type StoryDefault = StoryObj<typeof meta>;
 
-export const TextFieldDefault: StoryDefault = {};
+export const TextFieldDefault: StoryDefault = {
+  name: 'TextField Default',
+};
 
 export const TextFieldDisabled: StoryDefault = {
+  name: 'TextField Disabled',
   args: {
     disabled: true,
     label: 'Text Label',
@@ -95,6 +99,7 @@ export const TextFieldDisabled: StoryDefault = {
 };
 
 export const TextFieldReset: StoryDefault = {
+  name: 'TextField Reset',
   args: {
     label: 'Text Label',
     placeholder: 'Placeholder',

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

@@ -5,7 +5,7 @@ import ToastProvider from './ToastProvider';
 import Button from '../Button/Button';
 
 const meta: Meta<typeof ToastProvider> = {
-  title: 'Toast',
+  title: '@quickblox-react-ui-kit/Presentation/ui-components/Toast',
   component: ToastProvider,
   tags: ['autodocs'],
   parameters: {

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

@@ -5,7 +5,7 @@ import UserListItem from './UserListItem';
 import ScrollableContainer from '../../components/containers/ScrollableContainer/ScrollableContainer';
 
 const meta = {
-  title: 'User List Item',
+  title: '@quickblox-react-ui-kit/Presentation/ui-components/UserListItem',
   component: UserListItem,
   tags: ['autodocs'],
   parameters: {
@@ -118,11 +118,13 @@ function UserListExample() {
 }
 
 export const UserListItemDefault: StoryDefault = {
+  name: 'UserListItem Default',
   args: {
     userName: 'User name',
   },
 };
 
 export const UserList: StoryDefault = {
+  name: 'UserListItem Multiple',
   render: () => <UserListExample />,
 };

package/src/index.scss

@@ -11,8 +11,6 @@ body {
   font-family: 'Roboto';
   color: var(--main-text);
   background-color: var(--main-background);
-  overflow: hidden !important;
-  scrollbar-width: none !important;
 }
 
 /* Media-query for mobile devices */

package/src/qb-api-calls/index.ts

@@ -479,6 +479,7 @@ export function qbChatGetMessagesExtended(
     sort_desc: 'date_sent' | 'created_at' | 'updated_at';
     sort_asc: 'date_sent' | 'created_at' | 'updated_at';
     _id: string;
+    mark_as_read: 0 | 1;
     date_sent: Partial<{
       lt: number;
       lte: number;

package/storybook-static/433.dffc897e.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkquickblox_react_ui_kit=self.webpackChunkquickblox_react_ui_kit||[]).push([[433],{"./node_modules/@mdx-js/react/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{MDXContext:()=>_lib_index_js__WEBPACK_IMPORTED_MODULE_0__.pC,MDXProvider:()=>_lib_index_js__WEBPACK_IMPORTED_MODULE_0__.Zo,useMDXComponents:()=>_lib_index_js__WEBPACK_IMPORTED_MODULE_0__.ah,withMDXComponents:()=>_lib_index_js__WEBPACK_IMPORTED_MODULE_0__.NF});var _lib_index_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/@mdx-js/react/lib/index.js")},"./node_modules/@mdx-js/react/lib/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{NF:()=>withMDXComponents,Zo:()=>MDXProvider,ah:()=>useMDXComponents,pC:()=>MDXContext});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js");let MDXContext=react__WEBPACK_IMPORTED_MODULE_0__.createContext({});function withMDXComponents(Component){return boundMDXComponent;function boundMDXComponent(props){let allComponents=useMDXComponents(props.components);return react__WEBPACK_IMPORTED_MODULE_0__.createElement(Component,{...props,allComponents})}}function useMDXComponents(components){let contextComponents=react__WEBPACK_IMPORTED_MODULE_0__.useContext(MDXContext);return react__WEBPACK_IMPORTED_MODULE_0__.useMemo(()=>"function"==typeof components?components(contextComponents):{...contextComponents,...components},[contextComponents,components])}let emptyObject={};function MDXProvider({components,children,disableParentContext}){let allComponents;return allComponents=disableParentContext?"function"==typeof components?components({}):components||emptyObject:useMDXComponents(components),react__WEBPACK_IMPORTED_MODULE_0__.createElement(MDXContext.Provider,{value:allComponents},children)}}}]);

package/storybook-static/603.4cf0423b.iframe.bundle.js

@@ -0,0 +1 @@
+(self.webpackChunkquickblox_react_ui_kit=self.webpackChunkquickblox_react_ui_kit||[]).push([[603],{"./node_modules/@storybook/addon-docs/dist/DocsRenderer-NNNQARDV.mjs":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{DocsRenderer:()=>DocsRenderer});var react=__webpack_require__("./node_modules/react/index.js"),react_18=__webpack_require__("./node_modules/@storybook/react-dom-shim/dist/react-18.mjs"),dist=__webpack_require__("./node_modules/@storybook/blocks/dist/index.mjs"),defaultComponents={code:dist.bD,a:dist.Ct,...dist.lO},ErrorBoundary=class extends react.Component{constructor(){super(...arguments),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(err){let{showException}=this.props;showException(err)}render(){let{hasError}=this.state,{children}=this.props;return hasError?null:react.createElement(react.Fragment,null,children)}},DocsRenderer=class{constructor(){this.render=async(context,docsParameter,element)=>{let components={...defaultComponents,...docsParameter?.components},TDocs=dist.WI;return new Promise((resolve,reject)=>{__webpack_require__.e(433).then(__webpack_require__.bind(__webpack_require__,"./node_modules/@mdx-js/react/index.js")).then(({MDXProvider})=>(0,react_18.l)(react.createElement(ErrorBoundary,{showException:reject,key:Math.random()},react.createElement(MDXProvider,{components},react.createElement(TDocs,{context,docsParameter}))),element)).then(()=>resolve())})},this.unmount=element=>{(0,react_18.K)(element)}}}},"./node_modules/memoizerific sync recursive":module=>{function webpackEmptyContext(req){var e=Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=()=>[],webpackEmptyContext.resolve=webpackEmptyContext,webpackEmptyContext.id="./node_modules/memoizerific sync recursive",module.exports=webpackEmptyContext}}]);