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

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

@@ -0,0 +1,82 @@
+@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;
+
+    &--disabled {
+      color: var(--caption);
+    }
+  }
+
+  &__label {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 3px;
+  }
+}

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

@@ -0,0 +1,150 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { LocationSvg, NextSVG } from '../../icons';
+import Dropdown from './Dropdown';
+import Button from '../Button/Button';
+
+const meta: Meta<typeof Dropdown> = {
+  title: '@quickblox-react-ui-kit/Presentation/ui-components/Dropdown',
+  component: Dropdown,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    disabled: false,
+    options: [
+      { value: '', label: '', leftIcon: undefined, rightIcon: undefined },
+    ],
+    className: '',
+  },
+  argTypes: {
+    children: {
+      control: false,
+      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>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>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>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' }} />,
+      },
+    ],
+  },
+};

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

@@ -0,0 +1,92 @@
+import {
+  ReactElement,
+  useEffect,
+  useRef,
+  useState,
+  MouseEvent as ReactMouseEvent,
+} from 'react';
+import cn from 'classnames';
+
+import DropdownOption, { Option } from './DropdownOption';
+import './Dropdown.scss';
+
+export interface DropDownProps {
+  options: Option[];
+  disabled?: boolean;
+  children?: ReactElement | string | number;
+  onSelect: (value: string) => void;
+  className?: string;
+  placement?: 'topRight' | 'bottomRight' | 'left';
+}
+
+export default function Dropdown({
+  options,
+  disabled = false,
+  onSelect,
+  className,
+  children,
+  placement = 'bottomRight',
+}: DropDownProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const handleToggleOpen = (
+    e: ReactMouseEvent<HTMLButtonElement, MouseEvent>,
+  ) => {
+    e.stopPropagation();
+    setIsOpen((state) => !state);
+  };
+
+  const handleSelect = (value: string) => {
+    onSelect(value);
+    setIsOpen(false);
+  };
+
+  useEffect(() => {
+    const handleBlur = (e: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        e.target instanceof Node &&
+        !dropdownRef.current.contains(e.target)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen)
+      document.addEventListener('click', handleBlur, {
+        capture: true,
+      });
+
+    return () => document.removeEventListener('click', handleBlur);
+  }, [isOpen]);
+
+  return (
+    <div ref={dropdownRef} className={cn('dropdown', className)}>
+      <button
+        type="button"
+        className="dropdown__toggle"
+        onClick={handleToggleOpen}
+      >
+        {children}
+      </button>
+      <ul
+        className={cn('dropdown__menu', `dropdown__menu--${placement}`, {
+          'dropdown__menu--opened': isOpen,
+        })}
+      >
+        {options.map(({ label, value, leftIcon, rightIcon }) => (
+          <DropdownOption
+            label={label}
+            value={value}
+            disabled={disabled}
+            onSelect={handleSelect}
+            leftIcon={leftIcon}
+            rightIcon={rightIcon}
+            key={value}
+          />
+        ))}
+      </ul>
+    </div>
+  );
+}

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

@@ -0,0 +1,38 @@
+import { ReactElement } from 'react';
+import cn from 'classnames';
+
+export interface Option {
+  value: string;
+  label: string;
+  disabled?: boolean;
+  leftIcon?: ReactElement;
+  rightIcon?: ReactElement;
+}
+
+interface DropdownOptionProps extends Option {
+  onSelect: (value: string) => void;
+}
+
+export default function DropdownOption({
+  label,
+  value,
+  disabled,
+  leftIcon,
+  rightIcon,
+  onSelect,
+}: DropdownOptionProps) {
+  return (
+    <li
+      className={cn('dropdown__option', {
+        'dropdown__option--disabled': disabled,
+      })}
+      onClick={() => !disabled && onSelect(value)}
+    >
+      <span className="dropdown__label">
+        {leftIcon}
+        {label}
+      </span>
+      {rightIcon}
+    </li>
+  );
+}

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

@@ -0,0 +1,72 @@
+@import '../../themes/styles/mixins';
+
+.dialog-header {
+  @include applyBorderBox;
+
+  width: 100%;
+  padding: 12px 16px 12px 20px;
+  display: flex;
+  align-items: center;
+  gap: 33px;
+
+  &__icon {
+    cursor: pointer;
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+  }
+
+  &__back {
+    color: var(--main-elements);
+  }
+
+  &__body {
+    width: 100%;
+    display: flex;
+    gap: 33px;
+    align-items: center;
+    justify-content: space-between;
+    overflow: hidden;
+
+    &-left {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      gap: 8px;
+      overflow: hidden;
+    }
+
+    &-right {
+      height: 24px;
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+  }
+
+  &__title {
+    color: var(--main-text, #0b1b0f);
+    text-align: left;
+    font: var(--title-title-medium);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &__line {
+    border-style: solid;
+    border-color: var(--color-divider, #e7efff);
+    border-width: 0 0 1px 0;
+  }
+}
+
+@media only screen and (max-width: var(--min-width-screen-desktop)) {
+  .dialog-header__body-left {
+    gap: 3px;
+  }
+}
+@media only screen and (min-width: 981px) {
+  .dialog-header__back {
+    display: none;
+  }
+}

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

@@ -0,0 +1,117 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+import Header from './Header';
+import {
+  GroupChatSvg,
+  UserSvg,
+  PublicChannelSvg,
+  CloseSvg,
+  InformationSvg,
+  SearchSvg,
+  NewChatSvg,
+} from '../../icons';
+import Avatar from '../Avatar/Avatar';
+
+const meta: Meta = {
+  title: '@quickblox-react-ui-kit/Presentation/ui-components/Header',
+  component: Header,
+  tags: ['autodocs'],
+  parameters: {
+    viewport: {
+      viewports: INITIAL_VIEWPORTS,
+    },
+  },
+  argTypes: {
+    title: {
+      control: { type: 'text' },
+      description: 'Dialog title',
+    },
+    avatar: {
+      description: 'Avatar or Icon',
+      type: 'function',
+      options: ['None', 'User', 'Group', 'Public', 'Photo'],
+      control: 'select',
+      mapping: {
+        None: undefined,
+        User: <Avatar icon={<UserSvg />} />,
+        Group: <Avatar icon={<GroupChatSvg />} />,
+        Public: <Avatar icon={<PublicChannelSvg />} />,
+        Photo: (
+          <Avatar src="https://quickblox.com/wp-content/themes/QuickbloxTheme2021/img/chat-messaging.svg" />
+        ),
+      },
+    },
+    badge: {
+      control: false,
+      description: 'Badge or dialog status',
+    },
+    children: {
+      type: 'function',
+      options: ['None', 'SingleIcon', 'MultiplyIcons', 'Close'],
+      control: 'select',
+      mapping: {
+        None: undefined,
+        SingleIcon: <InformationSvg />,
+        MultiplyIcons: [<SearchSvg />, <NewChatSvg />],
+        Close: <CloseSvg />,
+      },
+      table: {
+        type: { summary: 'svg' },
+      },
+      description: 'Additional content: list of icons',
+    },
+    onGoBack: {
+      action: 'clicked back button',
+    },
+    classNames: {
+      table: {
+        type: { summary: 'string' },
+      },
+      description: 'Additional classes',
+    },
+  },
+};
+
+export default meta;
+
+export const HeaderDefault: StoryObj<typeof Header> = {
+  args: {
+    title: 'Default Dialog desktop',
+  },
+  parameters: { layout: 'centered' },
+};
+export const HeaderWithAvatar: StoryObj<typeof Header> = {
+  args: {
+    title: 'Default Dialog desktop',
+    avatar: <Avatar icon={<UserSvg />} />,
+  },
+  parameters: { layout: 'centered' },
+};
+export const HeaderWithAvatarAndBack: StoryObj<typeof Header> = {
+  args: {
+    title: 'Default Dialog mobile',
+    avatar: <Avatar icon={<UserSvg />} />,
+    onGoBack: () => {
+      window.alert('onGoBack');
+    },
+  },
+  parameters: { viewport: { defaultViewport: 'iphonese2' } },
+};
+export const HeaderWithOneChildrenIcon: StoryObj<typeof Header> = {
+  args: {
+    title: 'Default Dialog desktop',
+    avatar: <Avatar icon={<UserSvg />} />,
+    children: <CloseSvg />,
+    onGoBack: undefined,
+  },
+  parameters: { layout: 'centered' },
+};
+export const HeaderWithTwoChildrenIcon: StoryObj<typeof Header> = {
+  args: {
+    title: 'Default Dialog desktop',
+    avatar: <Avatar icon={<UserSvg />} />,
+    children: [<SearchSvg />, <NewChatSvg />],
+    onGoBack: undefined,
+  },
+  parameters: { layout: 'centered' },
+};

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

@@ -0,0 +1,51 @@
+import { Children, ReactElement } from 'react';
+import cn from 'classnames';
+import { FunctionTypeVoidToVoid } from '../../../CommonTypes/BaseViewModel';
+import { BackSvg } from '../../icons';
+import './Header.scss';
+
+export type HeaderProps = {
+  title: string;
+  avatar?: ReactElement;
+  badge?: ReactElement;
+  children?: ReactElement | ReactElement[];
+  onGoBack?: FunctionTypeVoidToVoid;
+  className?: string;
+};
+
+// eslint-disable-next-line react/function-component-definition
+const Header: React.FC<HeaderProps> = ({
+  title,
+  avatar,
+  badge,
+  children,
+  onGoBack,
+  className,
+}: HeaderProps) => {
+  return (
+    <div className={cn('dialog-header', className)}>
+      {onGoBack && (
+        <BackSvg
+          className="dialog-header__icon dialog-header__back"
+          onClick={onGoBack}
+        />
+      )}
+      <div className="dialog-header__body">
+        <div className="dialog-header__body-left">
+          {avatar}
+          <span className="dialog-header__title">{title}</span>
+          {badge}
+        </div>
+        {children && (
+          <div className="dialog-header__body-right">
+            {Children.map(children, (child) => (
+              <span className="dialog-header__icon">{child}</span>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Header;

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

@@ -0,0 +1,27 @@
+.loader {
+  &--sm {
+    width: 24px;
+    height: 24px;
+  }
+
+  &--md {
+    width: 48px;
+    height: 48px;
+  }
+
+  &--lg {
+    width: 52px;
+    height: 52px;
+  }
+
+  animation: rotate 1s infinite linear;
+
+  @keyframes rotate {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}

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

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Loader from './Loader';
+
+const meta = {
+  title: '@quickblox-react-ui-kit/Presentation/ui-components/Loader',
+  component: Loader,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    className: '',
+  },
+  argTypes: {
+    size: {
+      options: ['sm', 'md', 'lg'],
+      control: { type: 'select' },
+      table: {
+        defaultValue: {
+          summary: 'md',
+        },
+        type: { summary: 'string' },
+      },
+      description: 'Size',
+    },
+    className: {
+      table: {
+        defaultValue: {
+          summary: 'string',
+        },
+        type: { summary: 'string' },
+      },
+      description: 'Additional classes',
+    },
+  },
+} satisfies Meta<typeof Loader>;
+
+export default meta;
+type StoryDefault = StoryObj<typeof meta>;
+
+export const LoaderDefault: StoryDefault = {};

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

@@ -0,0 +1,15 @@
+import cn from 'classnames';
+
+import { LoaderSvg } from '../../icons';
+import './Loader.scss';
+
+interface LoaderProps {
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+export default function Loader({ className, size = 'md' }: LoaderProps) {
+  return (
+    <LoaderSvg className={cn('loader', size && `loader--${size}`, className)} />
+  );
+}