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

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

@@ -0,0 +1,23 @@
+import './CheckBox.scss';
+
+interface CheckBoxProps {
+  disabled: boolean;
+  checked: boolean;
+  onChange?: (isSelected: boolean) => void;
+}
+
+export default function CheckBox({
+  disabled,
+  checked,
+  onChange,
+}: CheckBoxProps) {
+  return (
+    <input
+      className="checkbox"
+      type="checkbox"
+      checked={checked}
+      disabled={disabled}
+      onChange={() => onChange?.(!checked)}
+    />
+  );
+}

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

@@ -0,0 +1,29 @@
+@import '../../themes/styles/mixins';
+
+.dialog-banner {
+    @include applyBorderBox;
+    background: var(--main-elements, #3978fc);
+    border-radius: 4px;
+    padding: 2px 8px 2px 8px;
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    min-width: 312px;
+    cursor: pointer;
+
+  &__text {
+    color: var(--color-background, #ffffff);
+    text-align: center;
+    font: var(--label-label-small);
+  }
+
+  &__navigation-icon {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    fill: var(--color-background, #ffffff);
+  }
+}
+

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

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import DialogBanner from './DialogBanner';
+
+const meta = {
+  title: '@quickblox-react-ui-kit/Presentation/ui-components/DialogBanner',
+  component: DialogBanner,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: { text: '' },
+  argTypes: {
+    text: {
+      table: {
+        defaultValue: {
+          summary: '',
+        },
+      },
+      description: 'Text content',
+    },
+    onClick: {
+      description: 'click function',
+      table: {
+        type: { summary: 'function' },
+      },
+    },
+  },
+} satisfies Meta<typeof DialogBanner>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const DialogBannerDefault: Story = {
+  name: 'DialogBanner Default',
+  args: {
+    text: '3 new messages',
+  },
+};

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

@@ -0,0 +1,16 @@
+import { ReactComponent as DownSvg } from '../../icons/navigation/down.svg';
+import './DialogBanner.scss';
+
+type DialogBannerProps = {
+  text: string;
+  onClick?: VoidFunction;
+};
+
+export default function ({ text, onClick }: DialogBannerProps) {
+  return (
+    <div className="dialog-banner">
+      <span className="dialog-banner__text">{text}</span>
+      <DownSvg className="dialog-banner__navigation-icon" onClick={onClick} />
+    </div>
+  );
+}

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

@@ -0,0 +1,71 @@
+@import '../../themes/styles/mixins';
+
+.dialog-item-preview {
+  @include applyBorderBox;
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
+  gap: 16px;
+
+  &:hover {
+    background: var(--divider);
+  }
+
+  &--active {
+    box-shadow: 4px 0px 0px 0px var(--primary) inset;
+    background: var(--divider);
+  }
+
+  &__content {
+    width: calc(100% - 72px);
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+
+    &-top {
+      display: flex;
+      justify-content: space-between;
+
+      &-title {
+        font: var(--label-label-medium, 500 12px/16px "Roboto", sans-serif);
+        color: var(--main-text, #0b1b0f);
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      &-date {
+        color: var(--tertiary-elements, #636d78);
+        font: var(--label-label-small, 500 11px/16px "Roboto", sans-serif);
+      }
+    }
+
+    &-bottom {
+      display: flex;
+      justify-content: space-between;
+      gap: 5px;
+      height: 32px;
+
+      &-message {
+        color: var(--secondary-text, #636d78);
+        text-align: left;
+        font: var(--body-body-small, 400 12px/16px "Roboto", sans-serif);
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+
+      &-controls {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+
+        &-menu {
+          width: 24px;
+          height: 24px;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,194 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+import DialogItemPreview from './DialogItemPreview';
+import Badge from '../Badge/Badge';
+import Avatar from '../Avatar/Avatar';
+import {
+  ConferenceSvg,
+  GroupChatSvg,
+  MoreSvg,
+  PublicChannelSvg,
+  UserSvg,
+} from '../../icons';
+import PreviewFileMessage from '../PreviewFileMessage/PreviewFileMessage';
+import Dropdown from '../Dropdown/Dropdown';
+
+const meta: Meta<typeof DialogItemPreview> = {
+  title: '@quickblox-react-ui-kit/Presentation/ui-components/DialogItemPreview',
+  tags: ['autodocs'],
+  component: DialogItemPreview,
+  decorators: [],
+  parameters: {
+    viewport: {
+      viewports: INITIAL_VIEWPORTS,
+    },
+  },
+  argTypes: {
+    avatar: {
+      description: 'Avatar or Icon',
+      control: 'select',
+      options: ['User', 'Group', 'Conference', 'Public', 'Photo'],
+      mapping: {
+        User: <Avatar size="lg" icon={<UserSvg />} />,
+        Group: <Avatar size="lg" icon={<GroupChatSvg />} />,
+        Conference: <Avatar size="lg" icon={<ConferenceSvg />} />,
+        Public: <Avatar size="lg" icon={<PublicChannelSvg />} />,
+        Photo: (
+          <Avatar
+            size="lg"
+            src="https://quickblox.com/wp-content/themes/QuickbloxTheme2021/img/chat-messaging.svg"
+          />
+        ),
+      },
+    },
+    lastMessage: {
+      description: 'Last message by type',
+      control: 'select',
+      options: ['ShortText', 'LongText', 'Image', 'File', 'None'],
+      mapping: {
+        ShortText: 'Hello, world!How are you?',
+        LongText:
+          "Hello, dear Mr. User. Thank you for choosing us. I'm here to assist with your order's delivery. Please provide your preferred address and any specific instructions. We offer standard, express, and same-day delivery in select areas. Let us know your convenience, and we'll ensure a smooth process.",
+        Image: (
+          <PreviewFileMessage
+            name="My avatar.png"
+            src="https://quickblox.com/wp-content/themes/QuickbloxTheme2021/img/chat-messaging.svg"
+          />
+        ),
+        File: <PreviewFileMessage name="My Document.txt" />,
+        None: undefined,
+      },
+    },
+    badge: {
+      description: 'Badge',
+      control: 'select',
+      options: ['Default', 'OverCount', 'None'],
+      mapping: {
+        Default: <Badge count={5} />,
+        OverCount: <Badge count={15} limit={9} />,
+        None: undefined,
+      },
+    },
+    active: {
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+        type: { summary: 'boolean' },
+      },
+      description: 'Active',
+    },
+    contextMenu: {
+      description: 'Context action icon',
+      control: 'select',
+      options: ['Default', 'Leave', 'None'],
+      mapping: {
+        Default: <MoreSvg />,
+        Leave: (
+          <Dropdown
+            placement="left"
+            options={[
+              {
+                value: 'Leave',
+                label: 'Leave',
+              },
+            ]}
+            onSelect={(value: string) => {
+              console.log(value);
+            }}
+          >
+            <MoreSvg />
+          </Dropdown>
+        ),
+        None: undefined,
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const DialogItemPreviewDefault: Story = {
+  name: 'DialogItemPreview Default',
+  args: {
+    title: 'Name',
+    avatar: <Avatar size="lg" icon={<UserSvg />} />,
+  },
+  render: (args) => {
+    // eslint-disable-next-line no-param-reassign
+    args.date = new Date(args.date!).toLocaleDateString();
+
+    return <DialogItemPreview {...args} />;
+  },
+};
+
+export const DialogItemPreviewFullScreen: Story = {
+  name: 'DialogItemPreview FullScreen',
+  args: {
+    title: 'Name',
+    avatar: <Avatar size="lg" icon={<UserSvg />} />,
+    lastMessage:
+      "Hello, dear Mr. User. Thank you for choosing us. I'm here to assist with your order's delivery. Please provide your preferred address and any specific instructions. We offer standard, express, and same-day delivery in select areas. Let us know your convenience, and we'll ensure a smooth process.",
+    badge: <Badge count={5} />,
+    contextMenu: <MoreSvg />,
+  },
+  parameters: {
+    viewport: {
+      defaultViewport: 'responsive',
+    },
+  },
+  render: (args) => {
+    // eslint-disable-next-line no-param-reassign
+    args.date = new Date(args.date!).toLocaleDateString();
+
+    return <DialogItemPreview {...args} />;
+  },
+};
+
+export const DialogItemPreviewMobileScreen: Story = {
+  name: 'DialogItemPreview MobileScreen',
+  args: {
+    title: 'Name',
+    avatar: <Avatar size="lg" icon={<UserSvg />} />,
+    lastMessage:
+      "Hello, dear Mr. User. Thank you for choosing us. I'm here to assist with your order's delivery. Please provide your preferred address and any specific instructions. We offer standard, express, and same-day delivery in select areas. Let us know your convenience, and we'll ensure a smooth process.",
+    badge: <Badge count={5} />,
+    contextMenu: <MoreSvg />,
+  },
+  parameters: {
+    viewport: {
+      defaultViewport: 'iphonese2',
+    },
+  },
+  render: (args) => {
+    // eslint-disable-next-line no-param-reassign
+    args.date = new Date(args.date!).toLocaleDateString();
+
+    return <DialogItemPreview {...args} />;
+  },
+};
+
+export const DialogItemPreviewMobileScreenIPad: Story = {
+  name: 'DialogItemPreview MobileScreen IPad',
+  args: {
+    title: 'Name',
+    avatar: <Avatar size="lg" icon={<UserSvg />} />,
+    lastMessage:
+      "Hello, dear Mr. User. Thank you for choosing us. I'm here to assist with your order's delivery. Please provide your preferred address and any specific instructions. We offer standard, express, and same-day delivery in select areas. Let us know your convenience, and we'll ensure a smooth process.",
+    badge: <Badge count={5} />,
+    contextMenu: <MoreSvg />,
+  },
+  parameters: {
+    viewport: {
+      defaultViewport: 'ipad',
+    },
+  },
+  render: (args) => {
+    // eslint-disable-next-line no-param-reassign
+    args.date = new Date(args.date!).toLocaleDateString();
+
+    return <DialogItemPreview {...args} />;
+  },
+};

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

@@ -0,0 +1,73 @@
+import { ReactElement } from 'react';
+import cn from 'classnames';
+import { FunctionTypeVoidToVoid } from '../../../CommonTypes/BaseViewModel';
+import './DialogItemPreview.scss';
+
+export type DialogItemPreviewProps = {
+  avatar: ReactElement;
+  title: string;
+  active?: boolean;
+  date?: string;
+  lastMessage?: ReactElement | string;
+  badge?: ReactElement;
+  contextMenu?: ReactElement;
+  onClick?: FunctionTypeVoidToVoid;
+  className?: string;
+};
+
+// eslint-disable-next-line react/function-component-definition
+const DialogItemPreview: React.FC<DialogItemPreviewProps> = ({
+  avatar,
+  title,
+  date,
+  active,
+  lastMessage,
+  badge,
+  contextMenu,
+  onClick,
+  className,
+}: DialogItemPreviewProps) => {
+  // eslint-disable-next-line consistent-return
+  return (
+    <div
+      className={cn(
+        'dialog-item-preview',
+        { 'dialog-item-preview--active': active },
+        className,
+      )}
+      onClick={onClick}
+    >
+      {avatar}
+      <div className="dialog-item-preview__content">
+        <div className="dialog-item-preview__content-top">
+          <span className="dialog-item-preview__content-top-title">
+            {title}
+          </span>
+          {date && (
+            <span className="dialog-item-preview__content-top-date">
+              {date}
+            </span>
+          )}
+        </div>
+        <div className="dialog-item-preview__content-bottom">
+          <div className="dialog-item-preview__content-bottom-message">
+            {lastMessage}
+          </div>
+          <div
+            onClick={(event) => event.stopPropagation()}
+            className="dialog-item-preview__content-bottom-controls"
+          >
+            {badge}
+            {contextMenu && (
+              <div className="dialog-item-preview__content-bottom-controls-menu">
+                {contextMenu}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DialogItemPreview;

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

@@ -0,0 +1,56 @@
+@import '../../themes/styles/mixins';
+
+.dialog-window {
+  @include applyBorderBox;
+
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  position: fixed;
+  background-color: rgba(19, 29, 40, 0.8);
+
+  &--disable {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 100;
+    display: block;
+  }
+
+  &__content {
+    width: 380px;
+    position: absolute;
+
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    padding: 24px;
+    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);
+
+    @media (max-width: 767px) {
+      width: 300px;
+    }
+  }
+
+  &__header {
+    margin-bottom: 28px;
+    padding: 0px !important;
+  }
+
+  &__close {
+    width: 24px;
+    height: 24px;
+
+    fill: var(--secondary-elements);
+    cursor: pointer;
+  }
+}

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

@@ -0,0 +1,107 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import DialogWindow from './DialogWindow';
+import Button from '../Button/Button';
+
+const meta: Meta<typeof DialogWindow> = {
+  title: '@quickblox-react-ui-kit/Presentation/ui-components/DialogWindow',
+  component: DialogWindow,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    children: undefined,
+    open: false,
+    title: '',
+    className: '',
+    onClose: undefined,
+  },
+  argTypes: {
+    title: {
+      table: {
+        defaultValue: {
+          summary: '',
+        },
+        type: { summary: 'string' },
+      },
+      description: 'Title for modal window',
+    },
+    children: {
+      table: {
+        defaultValue: {
+          summary: 'ReactNode',
+        },
+        type: { summary: 'ReactElement | ReactElement[]' },
+      },
+      description: 'Primary content',
+    },
+    open: {
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+        type: { summary: 'boolean' },
+      },
+      description: 'Open modal window',
+    },
+    className: {
+      table: {
+        defaultValue: {
+          summary: 'string',
+        },
+        type: { summary: 'string' },
+      },
+      description: 'Additional classes',
+    },
+    onClose: {
+      table: {
+        type: { summary: 'VoidFunction' },
+      },
+      description: 'closes the modal window',
+    },
+  },
+};
+
+export default meta;
+type StoryDefault = StoryObj<typeof meta>;
+
+function DialogWindowExample() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleOnChange = () => {
+    setIsOpen((state) => !state);
+  };
+
+  return (
+    <div>
+      <Button onClick={handleOnChange} type="button">
+        Button
+      </Button>
+      <DialogWindow open={isOpen} title="Headline" onClose={handleOnChange}>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-end',
+            marginTop: '48px',
+            gap: '8px',
+          }}
+        >
+          <Button variant="outlined" onClick={handleOnChange}>
+            Button
+          </Button>
+          <Button variant="danger" onClick={handleOnChange}>
+            Button
+          </Button>
+        </div>
+      </DialogWindow>
+    </div>
+  );
+}
+
+export const DialogWindowDefault: StoryDefault = {
+  name: 'DialogWindow Default',
+  render: () => <DialogWindowExample />,
+};

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

@@ -0,0 +1,44 @@
+import React, { ReactElement } from 'react';
+import { createPortal } from 'react-dom';
+import cn from 'classnames';
+
+import Header from '../Header/Header';
+import { CloseSvg } from '../../icons';
+import './DialogWindow.scss';
+
+interface DialogWindowProps {
+  open: boolean;
+  title: string;
+  children: ReactElement | ReactElement[];
+  onClose?: VoidFunction;
+  className?: string;
+  disableActions?: boolean;
+}
+
+export default function DialogWindow({
+  children,
+  onClose,
+  open = false,
+  title,
+  className,
+  disableActions = false,
+}: DialogWindowProps) {
+  if (!open) return null;
+
+  return createPortal(
+    <div className={cn('dialog-window', className)}>
+      <div className={cn('', { 'dialog-window--disable': disableActions })} />
+      <div className="dialog-window__content">
+        <Header
+          className="dialog-window__header"
+          onGoBack={onClose}
+          title={title}
+        >
+          <CloseSvg onClick={onClose} className="dialog-window__close" />
+        </Header>
+        {children}
+      </div>
+    </div>,
+    document.body,
+  );
+}