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

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

@@ -12,9 +12,9 @@ export type MessageProps = {
   type: 'outgoing' | 'incoming';
   subtype?: 'reply' | 'forward';
   status?: 'sent' | 'delivered' | 'viewed' | 'error';
-  enableSelect: boolean;
-  isSelect: boolean;
-  disabled: boolean;
+  enableSelect?: boolean;
+  isSelect?: boolean;
+  disabled?: boolean;
   onSelect?: (isSelected: boolean) => void;
   bottomPart?: ReactElement;
   additionalPart?: ReactElement;
@@ -29,7 +29,7 @@ export default function Message({
   type,
   status,
   subtype,
-  enableSelect = true,
+  enableSelect = false,
   isSelect = false,
   disabled = false,
   onSelect,
@@ -74,7 +74,7 @@ export default function Message({
                   {bottomPart}
                 </div>
                 {additionalPart}
-                <TimeAndStatus status={status} time={time} />
+                <TimeAndStatus time={time} />
               </div>
             </div>
           </div>

package/src/Presentation/ui-components/Message/TimeAndStatus/TimeAndStatus.scss

@@ -13,12 +13,9 @@
 
   &__caption {
     display: flex;
-    flex-direction: row;
     gap: 2px;
-    align-items: center;
-    justify-content: flex-start;
+    align-items: flex-end;
     flex-shrink: 0;
-    position: relative;
 
     &__status {
       width: 13px;

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

@@ -23,7 +23,6 @@
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
-    width: 328px;
     color: var(--secondary-text);
     text-align: center;
     font: var(--label-label-small, 500 11px/16px "Roboto", sans-serif);

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

@@ -8,7 +8,6 @@
   @include applyBorderBox;
 
   &__text {
-    margin: 16px 0px;
 
     font-family: 'Roboto';
     font-weight: 400;
@@ -22,6 +21,7 @@
   &__icon {
     width: 52px;
     height: 52px;
+    margin-bottom: 16px;
 
     fill: var(--caption);
   }

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: {
@@ -60,10 +58,10 @@ const meta: Meta<typeof Placeholder> = {
     },
     text: {
       defaultValue: {
-        summary: '',
+        summary: [''],
       },
       table: {
-        type: { summary: 'string' },
+        type: { summary: 'array' },
       },
       description: 'Placeholder text',
     },
@@ -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/Placeholder/Placeholder.tsx

@@ -5,8 +5,8 @@ import { RefreshSvg } from '../../icons';
 import './Placeholder.scss';
 
 interface PlaceholderProps {
-  icon: ReactElement;
-  text: string;
+  icon?: ReactElement;
+  text: string | string[];
   onRetry?: VoidFunction;
   className?: string;
 }
@@ -17,10 +17,16 @@ export default function Placeholder({
   onRetry,
   className,
 }: PlaceholderProps) {
+  const renderText = (content: string, index?: number) => (
+    <span key={index} className="placeholder__text">
+      {content}
+    </span>
+  );
+
   return (
     <div className={cn('placeholder', className)}>
-      <div className="placeholder__icon">{icon}</div>
-      <span className="placeholder__text">{text}</span>
+      {icon && <div className="placeholder__icon">{icon}</div>}
+      {Array.isArray(text) ? text.map(renderText) : renderText(text)}
       {onRetry && (
         <div className="placeholder__retry">
           <RefreshSvg className="placeholder__retry-icon" onClick={onRetry} />

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

@@ -32,6 +32,7 @@
   }
 
   &__input {
+    width: 100%;
     border: none;
     outline: none;
 

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

@@ -1,13 +1,12 @@
 .toast {
   min-height: 24px;
   padding: 4px 12px;
-  opacity: 60%;
+  opacity: 60% !important;
   border-radius: 4px;
   background-color: var(--toast-color);
 
   &__body {
-    padding: none;
-
+    padding: 0;
     font-family: 'Roboto';
     font-weight: 500;
     font-size: 12px;

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/Toast/ToastProvider.tsx

@@ -16,7 +16,6 @@ export default function ToastProvider({ children }: ToastProps) {
       <ToastContainer
         position="top-center"
         autoClose={3000}
-        className="toast-wrapper"
         bodyClassName="toast__body"
         toastClassName="toast"
         pauseOnHover={false}

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

@@ -0,0 +1,33 @@
+.user-list-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  height: 56px;
+  padding: 8px 19px 8px 16px;
+  gap: 16px;
+  background-color: var(--color-background);
+
+  &--disabled {
+    cursor: not-allowed;
+    color: var(--disabled-elements);
+    fill: var(--disabled-elements);
+  }
+
+  &__avatar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__name {
+    margin-left: 16px;
+
+    font-family: 'Roboto';
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    letter-spacing: 0.15px;
+    color: var(--main-text);
+  }
+}

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

@@ -0,0 +1,130 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import UserListItem from './UserListItem';
+import ScrollableContainer from '../../components/containers/ScrollableContainer/ScrollableContainer';
+
+const meta = {
+  title: '@quickblox-react-ui-kit/Presentation/ui-components/UserListItem',
+  component: UserListItem,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    className: '',
+    disabled: false,
+    checked: false,
+    userName: '',
+    avatarUrl: '',
+  },
+  argTypes: {
+    avatarUrl: {
+      table: {
+        type: { summary: 'url' },
+      },
+      description: 'Avatar image source',
+    },
+    userName: {
+      table: {
+        type: { summary: 'string' },
+        defaultValue: {
+          summary: '',
+        },
+      },
+      description: 'User name',
+    },
+    disabled: {
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: {
+          summary: false,
+        },
+      },
+      description: 'Active',
+    },
+    checked: {
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: {
+          summary: false,
+        },
+      },
+      description: 'Checkbox',
+    },
+    onChange: {
+      table: {
+        defaultValue: {
+          summary: '(checked: boolean) => void',
+        },
+        type: { summary: 'function' },
+      },
+      description: 'Checkbox control',
+    },
+    className: {
+      table: {
+        defaultValue: {
+          summary: 'string',
+        },
+        type: { summary: 'string' },
+      },
+      description: 'Additional classes',
+    },
+  },
+} satisfies Meta<typeof UserListItem>;
+
+export default meta;
+type StoryDefault = StoryObj<typeof meta>;
+
+function UserListExample() {
+  const [users, setUser] = useState([
+    { name: 'User 1', id: 0, checked: true },
+    { name: 'User 2', id: 1, checked: false },
+    { name: 'User 3', id: 2, checked: false },
+    { name: 'User 4', id: 3, checked: true },
+    { name: 'User 5', id: 4, checked: true },
+  ]);
+
+  const handleRenderUserListItem = (user: {
+    name: string;
+    id: number;
+    checked: boolean;
+  }) => {
+    return (
+      <UserListItem
+        userName={user.name}
+        checked={user.checked}
+        onChange={(value: boolean) => {
+          setUser((prevUsers) =>
+            prevUsers.map((prevUser) =>
+              prevUser.id === user.id
+                ? { ...prevUser, checked: value }
+                : prevUser,
+            ),
+          );
+        }}
+      />
+    );
+  };
+
+  return (
+    <ScrollableContainer
+      data={users}
+      renderItem={handleRenderUserListItem}
+      onEndReachedThreshold={0.8}
+      refreshing={false}
+    />
+  );
+}
+
+export const UserListItemDefault: StoryDefault = {
+  name: 'UserListItem Default',
+  args: {
+    userName: 'User name',
+  },
+};
+
+export const UserList: StoryDefault = {
+  name: 'UserListItem Multiple',
+  render: () => <UserListExample />,
+};

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

@@ -0,0 +1,43 @@
+import cn from 'classnames';
+
+import Avatar from '../Avatar/Avatar';
+import CheckBox from '../CheckBox/CheckBox';
+import './UserListItem.scss';
+
+export interface UserListItemProps {
+  userName: string;
+  avatarUrl?: string;
+  checked?: boolean;
+  disabled?: boolean;
+  onChange?: (checked: boolean) => void;
+  className?: string;
+}
+
+export default function UserListItem({
+  avatarUrl,
+  userName,
+  checked = false,
+  disabled = false,
+  onChange,
+  className,
+}: UserListItemProps) {
+  return (
+    <div
+      className={cn(
+        'user-list-item',
+        {
+          'user-list-item--disabled': disabled,
+        },
+        className,
+      )}
+    >
+      <div className="user-list-item__avatar">
+        <Avatar src={avatarUrl} />
+        <span className="user-list-item__name">{userName}</span>
+      </div>
+      {onChange && (
+        <CheckBox onChange={onChange} disabled={disabled} checked={checked} />
+      )}
+    </div>
+  );
+}

package/src/Presentation/ui-components/index.ts

@@ -1,13 +1,19 @@
 export { default as Avatar } from './Avatar/Avatar';
 export { default as Badge } from './Badge/Badge';
 export { default as Button } from './Button/Button';
+export { default as CheckBox } from './CheckBox/CheckBox';
 export { default as DialogBanner } from './DialogBanner/DialogBanner';
 export { default as DialogItemPreview } from './DialogItemPreview/DialogItemPreview';
+export { default as DialogWindow } from './DialogWindow/DialogWindow';
 export { default as Dropdown } from './Dropdown/Dropdown';
 export { default as Header } from './Header/Header';
 export { default as Loader } from './Loader/Loader';
+export { default as Message } from './Message/Message';
+export { default as MessageInput } from './MessageInput/MessageInput';
 export { default as MessageSeparator } from './MessageSeparator/MessageSeparator';
 export { default as Placeholder } from './Placeholder/Placeholder';
 export { default as PreviewFileMessage } from './PreviewFileMessage/PreviewFileMessage';
 export { default as SettingsItem } from './SettingsItem/SettingsItem';
 export { default as TextField } from './TextField/TextField';
+export { default as ToastProvider } from './Toast/ToastProvider';
+export { default as UserListItem } from './UserListItem/UserListItem';

package/src/QBconfig.ts

@@ -1,9 +1,9 @@
 export const QBConfig = {
   credentials: {
-    appId: 75949,
-    accountKey: 'uK_8uinNyz8-npTNB6tx',
-    authKey: 'DdS7zxMEm5Q7DaS',
-    authSecret: 'g88RhdOjnDOqFkv',
+    appId: -1,
+    accountKey: '',
+    authKey: '',
+    authSecret: '',
     sessionToken: '',
   },
   configAIApi: {

package/src/hooks/useModal.ts

@@ -0,0 +1,13 @@
+import { useState } from 'react';
+
+const useModal = () => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  const toggleModal = () => {
+    setIsOpen((state) => !state);
+  };
+
+  return { isOpen, toggleModal };
+};
+
+export default useModal;