quickblox-react-ui-kit 0.2.8-beta.9 → 0.3.0-beta.1

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

@@ -0,0 +1,166 @@
+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: '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 = {
+  args: {
+    title: 'Name',
+    avatar: <Avatar size="lg" icon={<UserSvg />} />,
+  },
+};
+
+export const DialogItemPreviewFullScreen: Story = {
+  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',
+    },
+  },
+};
+
+export const DialogItemPreviewMobileScreen: Story = {
+  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',
+    },
+  },
+};
+
+export const DialogItemPreviewMobileScreenIPad: Story = {
+  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',
+    },
+  },
+};

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

@@ -0,0 +1,70 @@
+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 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,40 @@
+@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);
+
+  &__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);
+  }
+
+  &__header {
+    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,106 @@
+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: 'Dialog Window',
+  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 = {
+  render: () => <DialogWindowExample />,
+};

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

@@ -0,0 +1,41 @@
+import { 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;
+}
+
+export default function DialogWindow({
+  children,
+  onClose,
+  open = false,
+  title,
+  className,
+}: DialogWindowProps) {
+  if (!open) return null;
+
+  return createPortal(
+    <div className={cn('dialog-window', className)}>
+      <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,
+  );
+}

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

@@ -0,0 +1,78 @@
+@import '../../themes/styles/mixins';
+
+.dropdown {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  @include applyBorderBox;
+
+  &__toggle {
+    width: 100%;
+    height: 100%;
+    background: none;
+    border: none;
+    color: inherit;
+    font: inherit;
+    line-height: normal;
+    overflow: visible;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    outline: none;
+  }
+
+  &__menu {
+    background-color: var(--main-background);
+    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.04),
+      0 3px 14px 0 rgba(0, 0, 0, 0.08);
+    border-radius: 4px;
+
+    padding: 8px 0px;
+    margin: 0;
+    z-index: 100;
+    position: absolute;
+    overflow: hidden;
+    list-style-type: none;
+    display: none;
+
+    &--topRight {
+      bottom: 100%;
+    }
+
+    &--left {
+      top: 50%;
+      transform: translateY(-50%);
+      right: 100%;
+    }
+
+    &--opened {
+      display: block;
+    }
+  }
+
+  &__option {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    font-family: 'Roboto';
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 20px;
+    letter-spacing: 0.25px;
+
+    height: 32px;
+    width: 135px;
+    padding: 4px 16px;
+
+    cursor: pointer;
+  }
+
+  &__label {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 3px;
+  }
+}

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

@@ -0,0 +1,148 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { LocationSvg, NextSVG } from '../../icons';
+import Dropdown from './Dropdown';
+
+const meta: Meta<typeof Dropdown> = {
+  title: 'Dropdown',
+  component: Dropdown,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    disabled: false,
+    options: [
+      { value: '', label: '', leftIcon: undefined, rightIcon: undefined },
+    ],
+    className: '',
+  },
+  argTypes: {
+    children: {
+      table: {
+        defaultValue: {
+          summary: null,
+        },
+        type: { summary: 'ReactElement | string | number' },
+      },
+      description: 'Primary content',
+    },
+    placement: {
+      table: {
+        defaultValue: {
+          summary: 'bottomRight',
+        },
+        type: { summary: 'topRight | bottomRight | left' },
+      },
+      description:
+        'The property that will determine where the Dropdown will appear',
+    },
+    className: {
+      table: {
+        type: { summary: 'string' },
+      },
+      description: 'Additional classes',
+    },
+    onSelect: {
+      table: {
+        type: { summary: 'function' },
+      },
+      description: 'Dropdown option selection function',
+    },
+    disabled: {
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+        type: { summary: 'boolean' },
+      },
+      description: 'Active',
+    },
+    options: {
+      table: {
+        defaultValue: {
+          summary: 'array',
+          detail: '[{ value: "", label: "" }]',
+        },
+        type: {
+          summary: 'object',
+          detail:
+            '\n{\n   value: string; \n   label: string; \n   leftIcon?: ReactElement; \n   rightIcon?: ReactElement; \n} ',
+        },
+      },
+      description: 'A set of options that can be passed to the dropdown',
+    },
+  },
+};
+
+export default meta;
+type StoryDefault = StoryObj<typeof meta>;
+
+export const DropdownDefault: StoryDefault = {
+  args: {
+    children: <button type="button">Button</button>,
+    disabled: false,
+    options: [
+      {
+        value: 'Text 1',
+        label: 'Text 1',
+      },
+      {
+        value: 'Text 2',
+        label: 'Text 2',
+      },
+      {
+        value: 'Text 3',
+        label: 'Text 3',
+      },
+    ],
+  },
+};
+
+export const DropdownRightIcon = {
+  args: {
+    children: <button type="button">Button</button>,
+    disable: false,
+    options: [
+      {
+        value: 'Text 1',
+        label: 'Text 1',
+        rightIcon: <NextSVG style={{ width: '18px', height: '18px' }} />,
+      },
+      {
+        value: 'Text 2',
+        label: 'Text 2',
+        rightIcon: <NextSVG style={{ width: '18px', height: '18px' }} />,
+      },
+      {
+        value: 'Text 3',
+        label: 'Text 3',
+        rightIcon: <NextSVG style={{ width: '18px', height: '18px' }} />,
+      },
+    ],
+  },
+};
+
+export const DropdownLeftIcon = {
+  args: {
+    children: <button type="button">Button</button>,
+    disable: false,
+    options: [
+      {
+        value: 'Text 1',
+        label: 'Text 1',
+        leftIcon: <LocationSvg style={{ width: '18px', height: '18px' }} />,
+      },
+      {
+        value: 'Text 2',
+        label: 'Text 2',
+        leftIcon: <LocationSvg style={{ width: '18px', height: '18px' }} />,
+      },
+      {
+        value: 'Text 3',
+        label: 'Text 3',
+        leftIcon: <LocationSvg style={{ width: '18px', height: '18px' }} />,
+      },
+    ],
+  },
+};