quickblox-react-ui-kit 0.4.1 → 0.4.2-beta.2

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

@@ -1,136 +0,0 @@
-.message-item {
-  display: flex;
-  flex-direction: row;
-  gap: 0px;
-  align-items: center;
-  justify-content: flex-start;
-  align-self: stretch;
-  flex-shrink: 0;
-  position: relative;
-
-  &__right {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-end;
-    justify-content: flex-end;
-    width: 100%;
-  }
-
-  &__more {
-    display: flex;
-    flex-direction: row;
-    gap: 10px;
-    align-items: center;
-    justify-content: center;
-    align-self: stretch;
-    flex-shrink: 0;
-    position: relative;
-    cursor: pointer;
-
-    &__icon {
-      border-radius: 4px;
-      display: flex;
-      flex-direction: row;
-      gap: 0px;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-      width: 24px;
-      height: 24px;
-      position: relative;
-      //padding-bottom: 10px;
-
-      &__actions {
-        fill: var(--tertiary-elements, #636D78);
-        path: var(--tertiary-elements, #636D78);
-      }
-    }
-  }
-
-  &__outgoing {
-    background: var(--main-background, #ffffff);
-    padding: 0px 8px 8px 16px;
-    display: flex;
-    flex-direction: row;
-    gap: 8px;
-    justify-content: flex-end;
-    align-self: stretch;
-    flex-shrink: 0;
-    width: 320px;
-    position: relative;
-
-    &__chat {
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-      align-items: flex-start;
-      justify-content: flex-start;
-      flex-shrink: 0;
-      position: relative;
-
-      &__bubble-background {
-        background: var(--outgoing-background, #E7EFFF);
-        border-radius: 22px 22px 0px 22px;
-        padding: 8px 12px 8px 12px;
-        display: flex;
-        flex-direction: row;
-        gap: 10px;
-        align-items: flex-start;
-        justify-content: flex-start;
-        flex-shrink: 0;
-        position: relative;
-      }
-    }
-  }
-
-  &__incoming-mes {
-    background: var(--secondary-background, #ffffff);
-    padding: 0px 16px 8px 8px;
-    display: flex;
-    flex-direction: row;
-    gap: 8px;
-    align-items: flex-end;
-    justify-content: flex-start;
-    align-self: stretch;
-    flex-shrink: 0;
-    width: 320px;
-    position: relative;
-  }
-
-  &__incoming {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    align-items: flex-start;
-    justify-content: flex-end;
-
-    &__chat {
-      display: flex;
-      flex-direction: row;
-      gap: 8px;
-
-      &__bubble {
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
-        align-items: flex-end;
-        justify-content: flex-end;
-        flex-shrink: 0;
-        position: relative;
-
-        &__background {
-          background: var(--incoming-background, #e4e6e8);
-          border-radius: 22px 22px 22px 0px;
-          padding: 8px 12px 8px 12px;
-          display: flex;
-          flex-direction: row;
-          gap: 10px;
-          align-items: flex-start;
-          justify-content: flex-start;
-          flex-shrink: 0;
-          position: relative;
-        }
-      }
-    }
-  }
-}

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

@@ -1,328 +0,0 @@
-import React, { ReactElement } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-
-import Message, { MessageProps } from './Message';
-import TextBubble from './Bubble/TextBubble/TextBubble';
-import FileBubble from './Bubble/FileBubble/FileBubble';
-import ImageBubble from './Bubble/ImageBubble/ImageBubble';
-import AudioBubble from './Bubble/AudioBubble/AudioBubble';
-import VideoBubble from './Bubble/VideoBubble/VideoBubble';
-
-function createBubbleByType(
-  type: 'incoming' | 'outgoing',
-  children?: ReactElement,
-) {
-  const isTextBubbleType = children?.type === TextBubble;
-  const isFileBubbleType = children?.type === FileBubble;
-  const isImageBubbleType = children?.type === ImageBubble;
-  const isAudioBubbleType = children?.type === AudioBubble;
-  const isVideoBubbleType = children?.type === VideoBubble;
-
-  if (isTextBubbleType) {
-    return (
-      <TextBubble
-        text="The QuickBlox UIKit for React is a comprehensive user interface kit specifically designed for building chat applications. It provides a collection of pre-built components, modules, and utilities that simplify the process of creating chat applications."
-        type={type}
-      />
-    );
-  }
-  if (isFileBubbleType) {
-    return (
-      <FileBubble
-        title="00b5563-small-qb-logo-docs-white-9px.png"
-        href="https://files.readme.io/00b5563-small-qb-logo-docs-white-9px.png"
-        type={type}
-      />
-    );
-  }
-  if (isImageBubbleType) {
-    return (
-      <ImageBubble
-        title="QuickBlox"
-        href="https://files.readme.io/00b5563-small-qb-logo-docs-white-9px.png"
-      />
-    );
-  }
-  if (isAudioBubbleType) {
-    return (
-      <AudioBubble
-        title="1.mp3"
-        href="//samplelib.com/lib/preview/mp3/sample-3s.mp3"
-        audioFileType="mp3"
-        fileUid="12345678901234544"
-        type={type}
-      />
-    );
-  }
-  if (isVideoBubbleType) {
-    return (
-      <VideoBubble
-        title="QuickBlox"
-        href="https://www.youtube.com/watch?v=0QFqNjhP-wM"
-      />
-    );
-  }
-
-  return undefined;
-}
-
-function getChildrenByType(type: string, children?: ReactElement) {
-  if ((type === 'incoming' || type === 'outgoing') && children) {
-    return createBubbleByType(type, children);
-  }
-
-  return undefined;
-}
-// const meta: Meta<typeof Message> = {
-const meta: Meta<MessageProps> = {
-  tags: ['autodocs'],
-  title: '@quickblox-react-ui-kit/Presentation/ui-components/Message',
-  component: Message,
-  decorators: [
-    (StoryFn, context) => {
-      const { type, children } = context.args;
-      const modifiedArgs = {
-        ...context.args,
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-        children: getChildrenByType(type, children),
-      };
-
-      return <StoryFn {...context} args={modifiedArgs} />;
-    },
-  ],
-  parameters: {
-    viewport: {
-      viewports: INITIAL_VIEWPORTS,
-    },
-  },
-  args: {
-    userName: 'Nate',
-    time: '16:58',
-    type: 'incoming',
-    status: undefined,
-    enableSelect: true,
-    isSelect: false,
-    disabled: false,
-    // bottomPart: (
-    //   <AITranslate
-    //     languagesForAITranslate={['UA', 'Eng', 'Fr', 'Ger', 'pl']}
-    //     onClickOriginalText={() => {
-    //       console.log('orig');
-    //     }}
-    //     originalTextMessage={false}
-    //     waitAIWidget={false}
-    //     onTranslate={() => {
-    //       console.log('translate');
-    //     }}
-    //   />
-    // ),
-    // additionalPart: (
-    //   <AIAssist
-    //     onAssistAnswer={() => {
-    //       console.log('ai-assist');
-    //     }}
-    //     waitAIWidget={false}
-    //   />
-    // ),
-  },
-  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: [
-        'TextMessage',
-        'FileMessage',
-        'ImageMessage',
-        'AudioMessage',
-        'VideoMessage',
-      ],
-      mapping: {
-        TextMessage: (
-          <TextBubble
-            text="The QuickBlox UIKit for React is a comprehensive user interface kit specifically designed for building chat applications. It provides a collection of pre-built components, modules, and utilities that simplify the process of creating chat applications."
-            type="incoming"
-          />
-        ),
-        FileMessage: (
-          <FileBubble
-            title="00b5563-small-qb-logo-docs-white-9px.png"
-            href="https://files.readme.io/00b5563-small-qb-logo-docs-white-9px.png"
-            type="incoming"
-          />
-        ),
-        ImageMessage: (
-          <ImageBubble
-            title="QuickBlox"
-            href="https://files.readme.io/00b5563-small-qb-logo-docs-white-9px.png"
-          />
-        ),
-        AudioMessage: (
-          <AudioBubble
-            title="1.mp3"
-            href="//samplelib.com/lib/preview/mp3/sample-3s.mp3"
-            audioFileType="mp3"
-            fileUid="12345678901234544"
-            type="incoming"
-          />
-        ),
-        VideoMessage: (
-          <VideoBubble
-            title="QuickBlox"
-            href="https://www.youtube.com/watch?v=0QFqNjhP-wM"
-          />
-        ),
-      },
-    },
-    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',
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const MessageText: Story = {
-  args: {
-    children: <TextBubble text="Test Message" type="incoming" />,
-  },
-};
-
-export const MessageImage: Story = {
-  args: {
-    children: (
-      <ImageBubble
-        title="QuickBlox"
-        href="https://files.readme.io/0a66fe7-SreenModulesDialogList.png"
-      />
-    ),
-  },
-};
-
-// export const MessageVideo: Story = {
-//   args: {
-//     children: (
-//       <VideoBubble
-//         title="QuickBlox"
-//         href="https://www.youtube.com/watch?v=0QFqNjhP-wM"
-//       />
-//     ),
-//   },
-// };
-
-export const MessageFile: Story = {
-  args: {
-    children: (
-      <FileBubble
-        type="incoming"
-        title="QuickBlox"
-        href="https://raw.githubusercontent.com/QuickBlox/react-ui-kit/main/README.md"
-      />
-    ),
-  },
-};
-
-// export const MessageTextWithAIfeatures: Story = {
-//   args: {
-//     children: <TextBubble text="Test Message" type="incoming" />,
-//     bottomPart: (
-//       <AITranslate
-//         languages={['English', 'French', 'Portuguese', 'German', 'Ukrainian']}
-//         defaultLanguage="English"
-//         originalTextMessage={false}
-//         loading={false}
-//         onTranslated={() => console.log('Function not implemented.')}
-//         onError={() => console.log('Function not implemented.')}
-//         onLoading={() => console.log('Function not implemented.')}
-//       />
-//     ),
-//     additionalPart: (
-//       <AIAssist
-//         loading={false}
-//         onError={() => console.log('Function not implemented.')}
-//         onLoading={() => console.log('Function not implemented.')}
-//       />
-//     ),
-//   },
-// };

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

@@ -1,85 +0,0 @@
-import React, { ReactElement } from 'react';
-import Avatar from '../Avatar/Avatar';
-import CheckBox from '../CheckBox/CheckBox';
-import MessageCaption from './MessageCaption/MessageCaption';
-import TimeAndStatus from './TimeAndStatus/TimeAndStatus';
-import './Message.scss';
-
-export type MessageProps = {
-  userName: string;
-  avatar?: ReactElement;
-  time: string;
-  type: 'outgoing' | 'incoming';
-  subtype?: 'reply' | 'forward';
-  status?: 'sent' | 'delivered' | 'viewed' | 'error';
-  enableSelect?: boolean;
-  isSelect?: boolean;
-  disabled?: boolean;
-  onSelect?: (isSelected: boolean) => void;
-  bottomPart?: ReactElement;
-  additionalPart?: ReactElement;
-  children?: ReactElement;
-};
-
-// eslint-disable-next-line react/function-component-definition,@typescript-eslint/no-unused-vars
-export default function Message({
-  userName,
-  avatar = <Avatar />,
-  time,
-  type,
-  status,
-  subtype,
-  enableSelect = false,
-  isSelect = false,
-  disabled = false,
-  onSelect,
-  bottomPart,
-  additionalPart,
-  children,
-}: MessageProps) {
-  return (
-    <div className="message-item">
-      {enableSelect && (
-        <CheckBox disabled={disabled} checked={isSelect} onChange={onSelect} />
-      )}
-
-      {type === 'outgoing' ? (
-        <div className="message-item__right">
-          <div className="message-item__outgoing">
-            <TimeAndStatus status={status} time={time} />
-            {additionalPart}
-            <div className="message-item__outgoing__chat">
-              <MessageCaption
-                type={type}
-                subtype={subtype}
-                userName={userName}
-              />
-              {children}
-            </div>
-          </div>
-        </div>
-      ) : (
-        <div>
-          <div className="message-item__incoming-mes">
-            {avatar}
-            <div className="message-item__incoming">
-              <MessageCaption
-                type={type}
-                subtype={subtype}
-                userName={userName}
-              />
-              <div className="message-item__incoming__chat">
-                <div className="message-item__incoming__chat__bubble">
-                  {children}
-                  {bottomPart}
-                </div>
-                {additionalPart}
-                <TimeAndStatus time={time} />
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

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

@@ -1,90 +0,0 @@
-.message-caption {
-
-  &__user {
-    padding: 0px 16px 0px 16px;
-    display: flex;
-    flex-direction: row;
-    gap: 8px;
-    align-items: flex-start;
-    justify-content: flex-start;
-    flex-shrink: 0;
-    position: relative;
-
-    &__caption {
-      display: flex;
-      flex-direction: row;
-      gap: 2px;
-      align-items: center;
-      justify-content: flex-start;
-      flex-shrink: 0;
-      position: relative;
-
-      &__name {
-        color: var(--secondary-text, #636d78);
-        text-align: left;
-        font: var(--label-label-medium);
-        position: relative;
-      }
-    }
-  }
-
-  &__forward-reply {
-    display: flex;
-    flex-direction: row;
-    gap: 2px;
-    align-items: center;
-    justify-content: flex-start;
-    flex-shrink: 0;
-    position: relative;
-
-    &--reply {
-      width: 16px;
-      height: 16px;
-      align-self: stretch;
-      flex: 1;
-      position: relative;
-      overflow: visible;
-      fill: var(--tertiary-elements, #636d78);
-    }
-
-    &--forward {
-      width: 16px;
-      height: 16px;
-      align-self: stretch;
-      flex: 1;
-      position: relative;
-      overflow: visible;
-      fill: var(--tertiary-elements, #636d78);
-    }
-
-    &__icon {
-      border-radius: 4px;
-      display: flex;
-      flex-direction: row;
-      gap: 0px;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-      width: 16px;
-      height: 16px;
-      position: relative;
-
-      &--filled {
-        align-self: stretch;
-        flex: 1;
-        height: auto;
-        position: relative;
-        overflow: visible;
-        fill: var(--tertiary-elements, #636d78);
-      }
-    }
-
-    &__from {
-      color: var(--tertiary-elements, #636d78);
-      text-align: left;
-      font: var(--label-label-medium);
-      position: relative;
-    }
-  }
-
-}

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

@@ -1,46 +0,0 @@
-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 './MessageCaption.scss';
-
-interface MessageCaptionProps {
-  type: 'outgoing' | 'incoming';
-  subtype?: 'reply' | 'forward';
-  userName: string;
-}
-
-const subtypeIconDictionary = {
-  forward: ForwardSvg,
-  reply: ReplySvg,
-};
-
-const renderSubtype = (subtype: 'reply' | 'forward') => {
-  const SubTypeIcon = subtypeIconDictionary[subtype];
-
-  return (
-    <SubTypeIcon className={`message-caption__forward-reply--${subtype}`} />
-  );
-};
-
-export default function MessageCaption({
-  type,
-  subtype,
-  userName,
-}: MessageCaptionProps) {
-  return (
-    <div className="message-caption__user__caption">
-      <div className="message-caption__forward-reply">
-        {subtype && renderSubtype(subtype)}
-        <span className="message-caption__forward-reply__from">
-          {subtype === 'forward' && 'Forwarded from '}
-          {subtype === 'reply' && 'Replied to '}
-        </span>
-      </div>
-      {(type === 'incoming' ||
-        subtype === 'reply' ||
-        subtype === 'forward') && (
-        <div className="message-caption__user__caption__name">{userName}</div>
-      )}
-    </div>
-  );
-}