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

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

@@ -1,82 +0,0 @@
-@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

@@ -1,150 +0,0 @@
-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

@@ -1,92 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,72 +0,0 @@
-@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

@@ -1,117 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,27 +0,0 @@
-.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

@@ -1,42 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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)} />
-  );
-}