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

package/.storybook/main.ts

@@ -0,0 +1,26 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/preset-create-react-app',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+    '@storybook/addon-viewport'
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {
+      builder: {
+        useSWC: true,
+      },
+    },
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  staticDirs: ['../public'],
+};
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,16 @@
+import type { Preview } from '@storybook/react';
+import '../src/index.scss';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package/README.md

@@ -14,6 +14,8 @@ The main goal of the QuickBlox UIKit for React is to offer developers a streamli
 
 The QuickBlox UIKit for React offers modules that encapsulate complex chat functionalities, such as dialogs and chat management and real-time updates. These modules provide a simplified interface for integrating chat features into applications without the need for extensive knowledge of the underlying protocols or server-side infrastructure.
 
+You can view and interact with the interface components of the UI Kit using Storybook. In fact, this provides an interactive environment showcasing different scenarios that UI components might encounter in a live application. To view these, visit our [documentation](https://quickblox.github.io/react-ui-kit/).
+
 # Screenshots
 
 Chat dashboard with list of dialogs and create new chat dialog;
@@ -291,8 +293,10 @@ and specify selected components:
 />
 ```
 # Sample
-
+The source code of the sample is available on GitHub:
 https://github.com/QuickBlox/quickblox-javascript-sdk/tree/gh-pages/samples/react-chat-ui-kit-init-sample
+You can view and interact with the interface components of the UI Kit using Storybook. In fact, this provides an interactive environment showcasing different scenarios that UI components might encounter in a live application. To view these, visit our [documentation](https://quickblox.github.io/react-ui-kit/).
+
 ## Video guide "How to use AI Feature"
 [Youtube video about AI Assistant](https://youtu.be/BneMtDagOy4)
 # License

package/dist/Presentation/Views/Dialog/AIComponents/AIAssist/AIAssist.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { AIMessageWidget } from '../../AIWidgets/AIMessageWidget';
+import { MessageEntity } from '../../../../../Domain/entity/MessageEntity';
+import './AIAssist.scss';
+interface AIAssistProps {
+    loading?: boolean;
+    AIAssistWidget: AIMessageWidget;
+    maxTokens?: number;
+    onLoading: (isLoading: boolean, id: string) => void;
+    onError: (messageError: string) => void;
+    messageToAssist?: MessageEntity;
+    messageHistory?: MessageEntity[];
+    currentUserId?: number;
+}
+export default function AIAssist({ loading, AIAssistWidget, maxTokens, onLoading, onError, messageToAssist, messageHistory, currentUserId, }: AIAssistProps): JSX.Element;
+export {};

package/dist/Presentation/Views/Dialog/AIComponents/AITranslate/AITranslate.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { MessageEntity } from '../../../../../Domain/entity/MessageEntity';
+import { AIMessageWidget } from '../../AIWidgets/AIMessageWidget';
+import './AITranslate.scss';
+interface AITranslateComponentProps {
+    AITranslateWidget: AIMessageWidget;
+    originalTextMessage: boolean;
+    loading?: boolean;
+    defaultLanguage: string;
+    languages: string[];
+    maxTokens?: number;
+    onLoading: (isLoading: boolean, id: string) => void;
+    onError: (messageError: string) => void;
+    onTranslated: (id: string, textTranslated: string) => void;
+    messageToTranslate?: MessageEntity;
+    messageHistory?: MessageEntity[];
+    currentUserId?: number;
+}
+export default function AITranslate({ AITranslateWidget, originalTextMessage, loading, defaultLanguage, languages, maxTokens, onLoading, onError, onTranslated, messageToTranslate, messageHistory, currentUserId, }: AITranslateComponentProps): JSX.Element;
+export {};

package/dist/Presentation/Views/Dialog/MessageItem/MessageItem.d.ts

@@ -0,0 +1,22 @@
+import { RefObject } from 'react';
+import { MessageEntity } from '../../../../Domain/entity/MessageEntity';
+import { FunctionTypeMessageEntityToVoid } from '../../../../CommonTypes/BaseViewModel';
+import { AIMessageWidget } from '../AIWidgets/AIMessageWidget';
+import './MessageItem.scss';
+export type MessageItemProps = {
+    message: MessageEntity;
+    userId?: number;
+    AITranslateWidget?: AIMessageWidget;
+    AIAssistWidget?: AIMessageWidget;
+    maxTokens: number;
+    defaultTranslationLanguage: string;
+    languagesForAITranslate: string[];
+    enableForwarding: boolean;
+    enableReplying: boolean;
+    onReply: FunctionTypeMessageEntityToVoid;
+    onForward: FunctionTypeMessageEntityToVoid;
+    listRef?: RefObject<HTMLDivElement>;
+    messagesToView: MessageEntity[];
+    onError: (messageError: string) => void;
+};
+export default function MessageItem({ message, userId, enableForwarding, enableReplying, onReply, onForward, listRef, messagesToView, AITranslateWidget, AIAssistWidget, maxTokens, defaultTranslationLanguage, languagesForAITranslate, onError, }: MessageItemProps): JSX.Element | null;

package/dist/Presentation/Views/DialogInfo/DialogInfo.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import './DialogInfo.scss';
 import { DialogEntity } from '../../../Domain/entity/DialogEntity';
-import { FunctionTypeBooleanToVoid, FunctionTypeDialogEntityToVoid, FunctionTypeVoidToVoid } from '../../../CommonTypes/BaseViewModel';
+import { FunctionTypeBooleanToVoid, FunctionTypeVoidToVoid } from '../../../CommonTypes/BaseViewModel';
 import { DialogListViewModel } from '../DialogList/DialogListViewModel';
 import UiKitTheme from '../../themes/UiKitTheme';
 import { UserEntity } from '../../../Domain/entity/UserEntity';
@@ -9,7 +9,6 @@ type HeaderDialogsProps = {
     dialog: DialogEntity;
     dialogViewModel: DialogListViewModel;
     onCloseDialogInformationHandler: FunctionTypeVoidToVoid;
-    onLeaveDialog: FunctionTypeDialogEntityToVoid;
     onShowAllMemberClick: FunctionTypeBooleanToVoid;
     users: UserEntity[];
     theme?: UiKitTheme;

package/dist/Presentation/Views/DialogList/DialogList.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FunctionTypeDialogEntityToVoid, FunctionTypeViewModelToVoid } from '../../../CommonTypes/BaseViewModel';
+import { FunctionTypeDialogEntityToVoid, FunctionTypeViewModelToVoid, FunctionTypeVoidToVoid } from '../../../CommonTypes/BaseViewModel';
 import { ThemeNames } from '../PreviewDialog/PreviewDialog';
 import { DialogListViewModel } from './DialogListViewModel';
 import { DialogEntity } from '../../../Domain/entity/DialogEntity';
@@ -19,9 +19,11 @@ type DialogsProps = {
     header?: React.ReactNode;
     subHeaderContent?: React.ReactNode;
     upHeaderContent?: React.ReactNode;
-    onDialogSelectHandler?: FunctionTypeViewModelToVoid<DialogEntity>;
+    selectedDialog?: DialogEntity;
+    onDialogSelected?: FunctionTypeViewModelToVoid<DialogEntity>;
     onLeaveDialog: FunctionTypeDialogEntityToVoid;
-    dialogsViewModel: DialogListViewModel;
+    onCreateDialog?: FunctionTypeVoidToVoid;
+    dialogListViewModel: DialogListViewModel;
     additionalSettings?: DialogsComponentSettings;
     scrollableHeight?: number;
 };

package/dist/Presentation/Views/Flow/CreateDialogFlow/CreateNewDialogFlow.d.ts

@@ -1,7 +1,10 @@
 import React from 'react';
 import { DialogListViewModel } from '../../DialogList/DialogListViewModel';
+import { DialogEntity } from '../../../../Domain/entity/DialogEntity';
 type CreateNewDialogFlowProps = {
     dialogsViewModel: DialogListViewModel;
+    onFinished: (newEntity: DialogEntity) => void;
+    onCancel?: () => void;
 };
 declare const CreateNewDialogFlow: React.FC<CreateNewDialogFlowProps>;
 export default CreateNewDialogFlow;

package/dist/Presentation/Views/YesNoQuestion/YesNoQuestion.d.ts

@@ -5,7 +5,6 @@ type YesNoQuestionProps = {
     messageText?: string;
     onClickYesAction?: FunctionTypeVoidToVoid;
     OnTouchYesAction?: FunctionTypeVoidToVoid;
-    onClickNoAction?: FunctionTypeVoidToVoid;
     onTouchNoAction?: FunctionTypeVoidToVoid;
     yesActionCaption?: string;
     noActionCaption?: string;

package/dist/Presentation/ui-components/Message/Message.d.ts

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

package/dist/Presentation/ui-components/Message/Message.stories.d.ts

@@ -6,4 +6,3 @@ type Story = StoryObj<typeof meta>;
 export declare const MessageText: Story;
 export declare const MessageImage: Story;
 export declare const MessageFile: Story;
-export declare const MessageTextWithAIfeatures: Story;

package/dist/Presentation/ui-components/Placeholder/Placeholder.d.ts

@@ -1,8 +1,8 @@
 import { ReactElement } from 'react';
 import './Placeholder.scss';
 interface PlaceholderProps {
-    icon: ReactElement;
-    text: string;
+    icon?: ReactElement;
+    text: string | string[];
     onRetry?: VoidFunction;
     className?: string;
 }

package/dist/Presentation/ui-components/UserListItem/UserListItem.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+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, disabled, onChange, className, }: UserListItemProps): JSX.Element;

package/dist/Presentation/ui-components/UserListItem/UserListItem.stories.d.ts

@@ -0,0 +1,86 @@
+import type { StoryObj } from '@storybook/react';
+import UserListItem from './UserListItem';
+declare const meta: {
+    title: string;
+    component: typeof UserListItem;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    args: {
+        className: string;
+        disabled: false;
+        checked: false;
+        userName: string;
+        avatarUrl: string;
+    };
+    argTypes: {
+        avatarUrl: {
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            description: string;
+        };
+        userName: {
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            description: string;
+        };
+        disabled: {
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            description: string;
+        };
+        checked: {
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            description: string;
+        };
+        onChange: {
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+                type: {
+                    summary: string;
+                };
+            };
+            description: string;
+        };
+        className: {
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+                type: {
+                    summary: string;
+                };
+            };
+            description: string;
+        };
+    };
+};
+export default meta;
+type StoryDefault = StoryObj<typeof meta>;
+export declare const UserListItemDefault: StoryDefault;
+export declare const UserList: StoryDefault;

package/dist/Presentation/ui-components/index.d.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/dist/hooks/useModal.d.ts

@@ -0,0 +1,5 @@
+declare const useModal: () => {
+    isOpen: boolean;
+    toggleModal: () => void;
+};
+export default useModal;