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

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

@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Placeholder from './Placeholder';
+import {
+  ErrorSvg,
+  PublicChannelSvg,
+  ChatSvg,
+  GroupChatSvg,
+  MutedSvg,
+  BannedSvg,
+  SearchSvg,
+} from '../../icons';
+
+const meta: Meta<typeof Placeholder> = {
+  title: '@quickblox-react-ui-kit/Presentation/ui-components/Placeholder',
+  component: Placeholder,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    text: ['Text for placeholder'],
+    className: '',
+    onRetry: undefined,
+    icon: undefined,
+  },
+  argTypes: {
+    icon: {
+      options: [
+        'Public',
+        'Message',
+        'Members',
+        'Muted',
+        'Banned',
+        'Search',
+        'Error',
+      ],
+      control: 'select',
+      mapping: {
+        Public: <PublicChannelSvg />,
+        Message: <ChatSvg />,
+        Members: <GroupChatSvg />,
+        Muted: <MutedSvg />,
+        Banned: <BannedSvg />,
+        Search: <SearchSvg />,
+        Error: <ErrorSvg />,
+      },
+      table: {
+        type: { summary: 'svg' },
+      },
+      description: 'Format plug svg',
+    },
+    onRetry: {
+      table: {
+        type: { summary: 'function' },
+      },
+      description: 'Action on re-try',
+    },
+    text: {
+      defaultValue: {
+        summary: [''],
+      },
+      table: {
+        type: { summary: 'array' },
+      },
+      description: 'Placeholder text',
+    },
+    className: {
+      table: {
+        type: { summary: 'string' },
+      },
+      description: 'Additional classes',
+    },
+  },
+};
+
+export default meta;
+type StoryDefault = StoryObj<typeof meta>;
+
+export const PlaceholderDefault: StoryDefault = {
+  args: {
+    icon: <PublicChannelSvg />,
+  },
+};
+
+export const PlaceholderError: StoryDefault = {
+  args: {
+    icon: <ErrorSvg />,
+    onRetry: () => undefined,
+  },
+};

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

@@ -0,0 +1,38 @@
+import { ReactElement } from 'react';
+import cn from 'classnames';
+
+import { RefreshSvg } from '../../icons';
+import './Placeholder.scss';
+
+interface PlaceholderProps {
+  icon?: ReactElement;
+  text: string | string[];
+  onRetry?: VoidFunction;
+  className?: string;
+}
+
+export default function Placeholder({
+  icon,
+  text,
+  onRetry,
+  className,
+}: PlaceholderProps) {
+  const renderText = (content: string, index?: number) => (
+    <span key={index} className="placeholder__text">
+      {content}
+    </span>
+  );
+
+  return (
+    <div className={cn('placeholder', className)}>
+      {icon && <div className="placeholder__icon">{icon}</div>}
+      {Array.isArray(text) ? text.map(renderText) : renderText(text)}
+      {onRetry && (
+        <div className="placeholder__retry">
+          <RefreshSvg className="placeholder__retry-icon" onClick={onRetry} />
+          Retry
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,30 @@
+.preview-file-message {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+
+  &__image {
+    object-fit: cover;
+    display: flex;
+    width: 32px;
+    height: 32px;
+    background: var(--incoming-background, #e4e6e8);
+    border-radius: 8px;
+    flex-shrink: 0;
+  }
+
+  &__icon {
+    fill: var(--caption);
+    padding: 6px;
+  }
+
+  &__name {
+    color: var(--secondary-text);
+    text-align: left;
+    font: 400 12px/16px "Roboto", sans-serif;
+    letter-spacing: 0.4px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}

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

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import PreviewFileMessage from './PreviewFileMessage';
+
+const meta: Meta<typeof PreviewFileMessage> = {
+  title:
+    '@quickblox-react-ui-kit/Presentation/ui-components/PreviewFileMessage',
+  tags: ['autodocs'],
+  component: PreviewFileMessage,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    type: {
+      options: ['document', 'audio', 'video'],
+      control: { type: 'select' },
+      table: {
+        defaultValue: {
+          summary: 'document',
+        },
+        type: { summary: 'string' },
+      },
+      description: 'File type',
+    },
+    name: {
+      table: {
+        type: { summary: 'string' },
+      },
+      description: 'Name of the file',
+    },
+    className: {
+      table: {
+        type: { summary: 'string' },
+      },
+      description: 'Additional classes',
+    },
+    src: {
+      table: {
+        type: { summary: 'string' },
+      },
+      description: 'Source file',
+    },
+  },
+};
+
+export default meta;
+type StoryDefault = StoryObj<typeof meta>;
+
+export const PreviewFileMessageDefault: StoryDefault = {
+  name: 'PreviewFileMessage Default',
+  args: {
+    name: 'text document.txt',
+  },
+};
+
+export const PreviewFileMessageAudio: StoryDefault = {
+  name: 'PreviewFileMessage Audio',
+  args: {
+    type: 'audio',
+    name: 'audio.mp3',
+  },
+};
+
+export const PreviewFileMessageVideo: StoryDefault = {
+  name: 'PreviewFileMessage Video',
+  args: {
+    type: 'video',
+    name: 'video.mp4',
+  },
+};
+
+export const PreviewFileMessageImage: StoryDefault = {
+  name: 'PreviewFileMessage Image',
+  args: {
+    src: 'https://quickblox.com/wp-content/themes/QuickbloxTheme2021/img/chat-messaging.svg',
+    name: 'screenshot.jpg',
+  },
+};

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

@@ -0,0 +1,38 @@
+import cn from 'classnames';
+import { TextDocumentSvg, AudioFileSvg, PlaySvg } from '../../icons';
+import './PreviewFileMessage.scss';
+
+const iconDictionary = {
+  document: TextDocumentSvg,
+  audio: AudioFileSvg,
+  video: PlaySvg,
+};
+
+export interface PreviewFileMessageProps {
+  type?: 'document' | 'audio' | 'video';
+  name: string;
+  src?: string;
+  className?: string;
+}
+
+export default function PreviewFileMessage({
+  type = 'document',
+  name,
+  src,
+  className,
+}: PreviewFileMessageProps) {
+  const Icon = iconDictionary[type];
+
+  return (
+    <div className={cn('preview-file-message', className)}>
+      {src ? (
+        <img src={src} alt="" className="preview-file-message__image" />
+      ) : (
+        <span className="preview-file-message__image">
+          <Icon className="preview-file-message__icon" />
+        </span>
+      )}
+      <span className="preview-file-message__name">{name}</span>
+    </div>
+  );
+}

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

@@ -0,0 +1,69 @@
+@import '../../themes/styles/mixins';
+
+.settings-item {
+  @include applyBorderBox;
+  background-color: var(--color-background);
+
+  &__body {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    width: 100%;
+    height: 56px;
+    gap: 16px;
+
+    padding: 16px;
+  }
+
+  &__left-section {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    font-family: 'Roboto';
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    letter-spacing: 0.15px;
+  }
+
+  &__title {
+    margin-left: 16px;
+  }
+
+  &__right-section {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  &__arrow {
+    width: 24px;
+    height: 24px;
+    fill: var(--secondary-elements);
+    cursor: pointer;
+    transform: rotate(270deg);
+    transition: transform 0.3s ease-in-out;
+
+    &--opened {
+      transform: rotate(360deg);
+    }
+  }
+
+  &__children {
+    height: 0;
+    overflow: auto;
+
+    transition: height 0.2s ease-in;
+
+    &--opened {
+      height: 100%;
+    }
+  }
+
+  &__icon {
+    width: 24px;
+    height: 24px;
+  }
+}

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

@@ -0,0 +1,184 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import SettingsItem from './SettingsItem';
+import Badge from '../Badge/Badge';
+import Avatar from '../Avatar/Avatar';
+import {
+  CloseSvg,
+  GroupChatSvg,
+  NotificationsSvg,
+  SearchSvg,
+} from '../../icons';
+
+const meta: Meta<typeof SettingsItem> = {
+  title: '@quickblox-react-ui-kit/Presentation/ui-components/SettingsItem',
+  component: SettingsItem,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    title: {
+      table: {
+        defaultValue: {
+          summary: '',
+        },
+        type: { summary: 'string' },
+      },
+      description: 'Name Setting item ',
+    },
+    className: {
+      table: {
+        defaultValue: {
+          summary: '',
+        },
+        type: { summary: 'string' },
+      },
+      description: 'Additional classes',
+    },
+    icon: {
+      control: false,
+      table: {
+        defaultValue: {
+          summary: 'svg | ReactElement',
+        },
+        type: { summary: 'svg | ReactElement' },
+      },
+      description: 'Format plug svg or React element ',
+    },
+    rightSection: {
+      control: false,
+      table: {
+        defaultValue: {
+          summary: 'ReactElement | ReactElement[]',
+        },
+        type: { summary: 'ReactElement | ReactElement[]' },
+      },
+      description: 'Elements for the right section',
+    },
+    onClick: {
+      control: false,
+      table: {
+        defaultValue: {
+          summary: 'VoidFunction',
+        },
+        type: { summary: 'VoidFunction' },
+      },
+      description: 'function onClick for icon',
+    },
+    children: {
+      control: false,
+      table: {
+        defaultValue: {
+          summary: 'ReactElement | ReactElement[]',
+        },
+        type: { summary: 'ReactElement | ReactElement[]' },
+      },
+      description: 'Elements that will be contained in the additional section',
+    },
+  },
+};
+
+export default meta;
+type StoryDefault = StoryObj<typeof meta>;
+
+export const SettingsItemDefault: StoryDefault = {
+  name: 'SettingsItem Default',
+  args: {
+    title: 'Search in dialog',
+    icon: (
+      <SearchSvg
+        style={{
+          fill: '#3978FC',
+        }}
+      />
+    ),
+  },
+};
+
+export const SettingsItemNotification: StoryDefault = {
+  name: 'SettingsItem Notification',
+  args: {
+    title: 'Notification',
+    icon: (
+      <NotificationsSvg
+        style={{
+          fill: '#3978FC',
+        }}
+      />
+    ),
+    rightSection: (
+      <CloseSvg
+        style={{
+          cursor: 'pointer',
+        }}
+      />
+    ),
+  },
+};
+
+export const SettingsItemMembers: StoryDefault = {
+  name: 'SettingsItem Members',
+  args: {
+    title: 'Notification',
+    icon: (
+      <GroupChatSvg
+        style={{
+          fill: '#3978FC',
+        }}
+      />
+    ),
+    rightSection: <Badge count={10} limit={99} mute />,
+    children: (
+      <ul
+        style={{
+          listStyle: 'none',
+          overflow: 'hidden',
+          margin: '0',
+          padding: '0',
+        }}
+      >
+        <li
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            padding: '8px 16px',
+            gap: '16px',
+          }}
+        >
+          <Avatar size="sm" /> Name
+        </li>
+        <li
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            padding: '8px 16px',
+            gap: '16px',
+          }}
+        >
+          <Avatar size="sm" /> Name
+        </li>
+        <li
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            padding: '8px 16px',
+            gap: '16px',
+          }}
+        >
+          <Avatar size="sm" /> Name
+        </li>
+        <li
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            padding: '8px 16px',
+            gap: '16px',
+          }}
+        >
+          <Avatar size="sm" /> Name
+        </li>
+      </ul>
+    ),
+  },
+};

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

@@ -0,0 +1,56 @@
+import { ReactElement, useState } from 'react';
+import cn from 'classnames';
+
+import { DownSvg } from '../../icons';
+import './SettingsItem.scss';
+
+interface SettingsItemProps {
+  icon: ReactElement;
+  title: string;
+  rightSection?: ReactElement | ReactElement[];
+  children?: ReactElement | ReactElement[];
+  className?: string;
+  onClick?: VoidFunction;
+}
+
+export default function SettingsItem({
+  icon,
+  title,
+  rightSection,
+  children,
+  className,
+  onClick,
+}: SettingsItemProps) {
+  const [isShow, setIsShow] = useState(false);
+
+  return (
+    <div onClick={onClick} className={cn('settings-item', className)}>
+      <div className="settings-item__body">
+        <div className="settings-item__left-section">
+          <span className="settings-item__icon">{icon}</span>
+          <span className="settings-item__title">{title}</span>
+        </div>
+        <div className="settings-item__right-section">
+          {rightSection}
+          {children && (
+            <DownSvg
+              className={cn('settings-item__arrow', {
+                'settings-item__arrow--opened': isShow,
+              })}
+              onClick={() => setIsShow(!isShow)}
+            />
+          )}
+        </div>
+      </div>
+      {children && (
+        <div
+          className={cn('settings-item__children', {
+            'settings-item__children--opened': isShow,
+          })}
+        >
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,91 @@
+@import '../../themes/styles/mixins';
+
+.text-field {
+  @include applyBorderBox;
+
+  &__label {
+    font-family: 'Roboto';
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 20px;
+    letter-spacing: 0.25px;
+  }
+
+  &__wrapper {
+    background-color: var(----color-background);
+
+    display: flex;
+    align-items: center;
+
+    border-radius: 4px;
+    border: 1px solid var(--tertiary-elements);
+    margin-top: 8px;
+    padding: 6px 8px;
+
+    &:active {
+      border: 1px solid var(--main-elements);
+    }
+  }
+
+  &__icon {
+    margin-right: 6px;
+  }
+
+  &__input {
+    width: 100%;
+    border: none;
+    outline: none;
+
+    font-family: 'Roboto';
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    letter-spacing: 0.15px;
+
+    &:disabled {
+      background-color: transparent;
+      cursor: not-allowed;
+      border: none;
+      color: inherit;
+    }
+
+    &::placeholder {
+      color: var(--secondary-text);
+    }
+  }
+
+  &__reset {
+    width: 24px;
+    height: 24px;
+    fill: var(--tertiary-elements);
+
+    cursor: pointer;
+  }
+
+  &--disabled *,
+  &--disabled &__label &__reset {
+    color: var(--disabled-elements);
+    fill: var(--disabled-elements);
+
+    cursor: not-allowed;
+  }
+
+  &--disabled &__wrapper {
+    background-color: var(--incoming-background);
+    border: none;
+
+    &:active {
+      border: none;
+    }
+  }
+
+  &--disabled &__input {
+    &::placeholder {
+      color: var(--disabled-elements);
+    }
+  }
+
+  &__loader {
+    fill: var(--color-icon);
+  }
+}