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

package/src/Presentation/themes/styles/_theme_dark.scss

@@ -0,0 +1,37 @@
+@import 'theme_colors_scheme';
+// https://sass-lang.com/documentation/breaking-changes/css-vars
+
+html[data-theme='dark'] {
+  --primary: #{$primary-500};
+  --color-background: #{$secondary-900};
+  --color-background-modal: #{$secondary-800};
+  --color-background-overlay: #{$secondary-900};
+  --color-divider: #{$secondary-400};
+  --color-font: #{$primary-a-100};
+  --color-icon: #{$primary-300};
+  --color-media-icon: #{$primary-a-100};
+  --color-default-hover: #{$secondary-700};
+  --color-default-active: #{$secondary-900};
+
+  --color-background-info: #{$primary-500};
+  --color-border-active: #{$secondary-200};
+  --tertiary-elements: #{$background-overlay-dark};
+  --main-elements: #{$primary-300};
+  --secondary-elements: #{$primary-a-100};
+  --input-elements: #{$secondary-200};
+  --disabled-elements: #{$secondary-300};
+  --field-border: #{$secondary-200};
+  --main-text: #{$primary-a-100};
+  --secondary-text: #{$secondary-200};
+  --caption: #{$secondary-100};
+  --main-background: #{$secondary-500};
+  --secondary-background: #{$secondary-800};
+  --incoming-background: #{$secondary-400};
+  --outgoing-background: #{$primary-500};
+  --dropdown-background: #{$secondary-400};
+  --chat-input: #{$secondary-800};
+  --divider: #{$secondary-400};
+  --error: #{$error-300};
+  --error-secondary: #{$error-100};
+  --hightlight: #{$highlight};
+}

package/src/Presentation/themes/styles/_theme_light.scss

@@ -0,0 +1,38 @@
+@import 'theme_colors_scheme';
+
+:root {
+  --primary: #{$primary-500};
+  --color-background: #{$primary-a-100};
+  --color-background-modal: #{$primary-100};
+  --color-background-overlay: #{$secondary-900};
+  --color-divider: #{$primary-50};
+  --color-font: #{$secondary-900};
+  --color-icon: #{$primary-500};
+  --color-media-icon: #{$primary-a-100};
+  --color-default-hover: #{$primary-700};
+  --color-default-active: #{$primary-900};
+
+  --color-background-info: #{$primary-100};
+  --color-border-active: #{$primary-200};
+  --tertiary-elements: #{$secondary-300};
+  --main-elements: #{$primary-500};
+  --toast-color: #{$secondary-800};
+  --secondary-elements: #{$secondary-500};
+  --input-elements: #{$secondary-500};
+  --disabled-elements: #{$secondary-100};
+  --field-border: #{$secondary-200};
+  --main-text: #{$secondary-900};
+  --secondary-text: #{$secondary-300};
+  --caption: #{$secondary-200};
+  --main-background: #{$primary-a-100};
+  --secondary-background: #{$primary-a-100}; // #{$primary-50};
+  --secondary-background-modal: #{$background-overlay-light};
+  --incoming-background: #{$secondary-50};
+  --outgoing-background: #{$primary-50};
+  --dropdown-background: #{$primary-a-100};
+  --chat-input: #{$primary-a-200};
+  --divider: #{$primary-50};
+  --error: #{$error-500};
+  --error-secondary: #{$error-200};
+  --hightlight: #{$highlight};
+}

package/src/Presentation/themes/styles/_variables.scss

@@ -0,0 +1,54 @@
+@import "theme_light";
+@import "theme_dark";
+
+$qb-min-width-screen-desktop: 980px;
+
+$qb-max-width-screen: 980px;
+
+$qb-max-width-message-view-container-desktop: 680px;
+$qb-max-width-message-view-container-mobile: 345px;
+
+$qb-max-width-message-bubble-desktop: 480px;
+$qb-max-width-message-bubble-mobile: 170px;
+
+$qb-max-width-image-message-desktop: 240px;
+$qb-max-width-image-message-mobile: 150px;
+
+$qb-max-width-audio-message-desktop: 300px;
+$qb-max-width-audio-message-mobile: 150px;
+
+$qb-max-width-dialog-list-desktop: 320px;
+$qb-max-width-dialog-list-mobile: 100%;
+
+$create-dialog-container-width: 380px;
+
+
+
+/* Fonts */
+:root{
+  --title-title-large: 500 20px/24px "Roboto", sans-serif;
+  --title-title-medium: 500 16px/24px "Roboto", sans-serif;
+  --title-title-small: 500 14px/20px "Roboto", sans-serif;
+  --label-label-large: 500 14px/20px "Roboto", sans-serif;
+  --label-label-medium: 500 12px/16px "Roboto", sans-serif;
+  --label-label-small: 500 11px/16px "Roboto", sans-serif;
+  --body-body-large: 400 16px/24px "Roboto", sans-serif;
+  --body-body-medium: 400 14px/20px "Roboto", sans-serif;
+  --body-body-small: 400 12px/16px "Roboto", sans-serif;
+  --button-fab: 500 14px/16px "Roboto", sans-serif;
+  --button-default: 700 14px/16px "Roboto", sans-serif;
+  --ui-kit-header: 500 48px "Roboto Mono", sans-serif;
+  --ui-kit-title: 500 32px "Roboto Mono", sans-serif;
+  --ui-kit-body: 400 17px "Roboto Mono", sans-serif;
+
+/* Width */
+  --max-width-message-bubble: #{$qb-max-width-message-bubble-desktop};
+  --max-width-message-view-container: #{$qb-max-width-message-view-container-desktop};
+  --max-width-image-message: #{$qb-max-width-image-message-desktop};
+  --max-width-audio-message: #{$qb-max-width-audio-message-desktop};
+  --max-width-dialog-list: #{$qb-max-width-dialog-list-desktop};
+  --min-width-screen-desktop: #{$qb-min-width-screen-desktop};
+}
+
+
+

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

@@ -0,0 +1,58 @@
+@import '../../themes/styles/mixins';
+
+.avatar {
+  @include applyBorderBox;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+
+  overflow: hidden;
+  border-radius: 50%;
+  background-color: var(--disabled-elements);
+  color: var(--secondary-text);
+
+  svg {
+    height: 100%;
+    width: 100%;
+    
+    fill: var(--secondary-text);
+    padding: 10px;
+  }
+
+  &__image {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+  }
+
+  &--xs {
+    width: 32px;
+    height: 32px;
+  }
+
+  &--sm {
+    width: 36px;
+    height: 36px;
+  }
+
+  &--md {
+    width: 40px;
+    height: 40px;
+  }
+
+  &--lg {
+    width: 56px;
+    height: 56px;
+  }
+
+  &--xl {
+    width: 64px;
+    height: 64px;
+  }
+
+  &--xxl {
+    width: 80px;
+    height: 80px;
+  }
+}

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

@@ -0,0 +1,30 @@
+import { ReactElement } from 'react';
+import cn from 'classnames';
+import { UserSvg } from '../../icons';
+import './Avatar.scss';
+
+export interface AvatarProps {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+  icon?: ReactElement;
+  className?: string;
+  src?: string;
+}
+
+export default function Avatar({
+  icon = <UserSvg />,
+  size = 'md',
+  className,
+  src,
+}: AvatarProps) {
+  if (src) {
+    return (
+      <div className={cn('avatar', `avatar--${size}`, className)}>
+        <img src={src} className="avatar__image" alt="Avatar" />
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('avatar', `avatar--${size}`, className)}>{icon}</div>
+  );
+}

package/src/Presentation/ui-components/Avatar/avatar.stories.tsx

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import {
+  GroupChatSvg,
+  UserSvg,
+  ConferenceSvg,
+  PublicChannelSvg,
+} from '../../icons';
+import Avatar from './Avatar';
+
+const meta: Meta<typeof Avatar> = {
+  title: '@quickblox-react-ui-kit/Presentation/ui-components/Avatar',
+  component: Avatar,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    size: 'md',
+  },
+  argTypes: {
+    icon: {
+      type: 'function',
+      options: ['User', 'Group', 'Conference', 'Public'],
+      control: 'select',
+      mapping: {
+        User: <UserSvg />,
+        Group: <GroupChatSvg />,
+        Conference: <ConferenceSvg />,
+        Public: <PublicChannelSvg />,
+      },
+      table: {
+        type: { summary: 'svg' },
+      },
+      description: 'Format plug svg',
+    },
+    size: {
+      options: ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'],
+      control: { type: 'select' },
+      table: {
+        defaultValue: {
+          summary: 'md',
+        },
+        type: { summary: 'string' },
+      },
+      description: 'Size',
+    },
+    src: {
+      table: {
+        type: { summary: 'url' },
+      },
+      description: 'Avatar image source',
+    },
+    className: {
+      table: {
+        type: { summary: 'string' },
+      },
+      description: 'Additional classes',
+    },
+  },
+};
+
+export default meta;
+type StoryDefault = StoryObj<typeof meta>;
+
+export const AvatarDefault: StoryDefault = {};
+
+export const AvatarIcon: StoryDefault = {
+  args: {
+    icon: <UserSvg />,
+  },
+};
+
+export const AvatarImage: StoryDefault = {
+  args: {
+    src: 'https://quickblox.com/wp-content/themes/QuickbloxTheme2021/img/chat-messaging.svg',
+  },
+};

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

@@ -0,0 +1,23 @@
+.badge {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  height: 20px;
+  border-radius: 30px;
+  padding: 2px 6px;
+
+  font-family: 'Roboto';
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 16px;
+  letter-spacing: 0.5px;
+
+  background-color: var(--main-elements);
+  color: var(--secondary-background);
+
+  &--mute {
+    background-color: var(--disabled-elements);
+    color: var(--secondary-background);
+  }
+}

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

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Badge from './Badge';
+
+const meta: Meta<typeof Badge> = {
+  title: '@quickblox-react-ui-kit/Presentation/ui-components/Badge',
+  component: Badge,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: { count: 0, limit: 99, mute: false, classNames: '' },
+  argTypes: {
+    count: {
+      table: {
+        defaultValue: {
+          summary: 0,
+        },
+      },
+      description: 'Number of unread messages',
+    },
+    limit: {
+      table: {
+        defaultValue: {
+          summary: 99,
+        },
+      },
+      description: 'Limt of message count',
+    },
+    mute: {
+      table: {
+        defaultValue: {
+          summary: 'boolean',
+        },
+      },
+      description: 'Display type Badge',
+    },
+    classNames: {
+      table: {
+        type: { summary: 'string' },
+      },
+      description: 'Additional classes',
+    },
+  },
+};
+
+export default meta;
+type StoryDefault = StoryObj<typeof meta>;
+
+export const BadgeDefault: StoryDefault = {};
+
+export const BadgeCount: StoryDefault = {
+  args: {
+    count: 9,
+  },
+};
+
+export const BadgeMute: StoryDefault = {
+  args: {
+    limit: 99,
+    count: 120,
+    mute: true,
+  },
+};

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

@@ -0,0 +1,23 @@
+import cn from 'classnames';
+
+import './Badge.scss';
+
+interface BadgeProps {
+  count: number;
+  limit?: number;
+  mute?: boolean;
+  classNames?: string;
+}
+
+export default function Badge({
+  count,
+  limit,
+  mute = false,
+  classNames,
+}: BadgeProps) {
+  return (
+    <div className={cn('badge', { 'badge--mute': mute }, classNames)}>
+      {limit && count > limit ? `${limit}+` : count}
+    </div>
+  );
+}

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

@@ -0,0 +1,133 @@
+@import '../../themes/styles/mixins';
+
+.button {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 8px 16px;
+
+  height: 32px;
+
+  border-radius: 4px;
+
+  flex: none;
+  order: 1;
+  flex-grow: 0;
+
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 16px;
+  letter-spacing: 0.4px;
+
+  cursor: pointer;
+  border: none;
+  outline: none;
+  @include applyBorderBox;
+
+  &--default {
+    color: var(--secondary-background);
+    background-color: var(--main-elements);
+
+    &:hover {
+      background-color: var(--color-default-hover);
+    }
+
+    &:focus {
+      outline: 2px solid var(--color-background-info);
+    }
+
+    &:active {
+      background-color: var(--color-default-hover);
+      color: var(--color-background-info);
+    }
+
+    &.button--disabled {
+      cursor: not-allowed;
+      background-color: var(--disabled-elements);
+      color: var(--secondary-text);
+    }
+  }
+
+  &--outlined {
+    background-color: inherit;
+    border: 1px solid var(--main-elements);
+    color: var(--main-elements);
+
+    &:hover {
+      background-color: var(--outgoing-background);
+    }
+
+    &:focus {
+      border: 2px solid var(--color-background-info);
+    }
+
+    &:active {
+      border: 1px solid var(--main-elements);
+      color: var(--main-elements);
+    }
+
+    &.button--disabled {
+      cursor: not-allowed;
+      border: 1px solid var(--disabled-elements);
+      color: var(--disabled-elements);
+    }
+  }
+
+  &--danger {
+    background-color: var(--error);
+    color: var(--secondary-background);
+
+    &:focus {
+      outline: 2px solid var(--error-secondary);
+    }
+
+    &:active {
+      color: var(--error-secondary);
+    }
+
+    &.button--disabled {
+      cursor: not-allowed;
+      background-color: var(--disabled-elements);
+      color: var(--secondary-text);
+    }
+  }
+
+  &--text {
+    background-color: inherit;
+    color: var(--main-elements);
+
+    &:focus {
+      outline: 2px solid var(--color-background-info);
+    }
+
+    &:active {
+      color: var(--color-default-hover);
+    }
+
+    &.button--disabled {
+      cursor: not-allowed;
+      color: var(--disabled-elements);
+    }
+  }
+
+  &__loader {
+    &--default {
+      fill: var(--secondary-background);
+    }
+
+    &--outlined {
+      fill: var(--main-elements);
+    }
+
+    &--danger {
+      fill: var(--secondary-background);
+    }
+
+    &--text {
+      fill: var(--disabled-elements);
+    }
+  }
+}

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

@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Button from './Button';
+
+const meta = {
+  title: '@quickblox-react-ui-kit/Presentation/ui-components/Button',
+  component: Button,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    disabled: false,
+    loading: false,
+    className: '',
+    children: 'Button',
+  },
+  argTypes: {
+    variant: {
+      options: ['default', 'outlined', 'danger', 'text'],
+      control: { type: 'select' },
+      table: {
+        defaultValue: {
+          summary: "'default'",
+        },
+        type: { summary: 'string' },
+      },
+      description: 'Button style',
+    },
+    disabled: {
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+        type: { summary: 'boolean' },
+      },
+      description: 'Active',
+    },
+    loading: {
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+        type: { summary: 'boolean' },
+      },
+      description: 'Loading',
+    },
+    className: {
+      table: {
+        defaultValue: {
+          summary: 'string',
+        },
+        type: { summary: 'string' },
+      },
+      description: 'Additional classes',
+    },
+    children: {
+      table: {
+        defaultValue: {
+          summary: null,
+        },
+        type: { summary: 'ReactElement | string | number' },
+      },
+      description: 'Primary content',
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type StoryDefault = StoryObj<typeof meta>;
+
+export const ButtonDefault: StoryDefault = {};
+
+export const ButtonOutline: StoryDefault = {
+  args: {
+    variant: 'outlined',
+    children: 'Button',
+  },
+};
+
+export const ButtonDanger: StoryDefault = {
+  args: {
+    variant: 'danger',
+    children: 'Button',
+  },
+};
+
+export const ButtonText: StoryDefault = {
+  args: {
+    variant: 'text',
+    children: 'Button',
+  },
+};

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

@@ -0,0 +1,49 @@
+import { ButtonHTMLAttributes, DetailedHTMLProps, ReactElement } from 'react';
+import cn from 'classnames';
+
+import Loader from '../Loader/Loader';
+import './Button.scss';
+
+type HTMLButtonProps = DetailedHTMLProps<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  HTMLButtonElement
+>;
+
+interface ButtonProps extends HTMLButtonProps {
+  variant?: 'default' | 'outlined' | 'danger' | 'text';
+  disabled?: boolean;
+  loading?: boolean;
+  className?: string;
+  children?: ReactElement | string | number;
+}
+
+export default function Button({
+  variant = 'default',
+  className,
+  disabled = false,
+  loading = false,
+  children,
+  ...rest
+}: ButtonProps) {
+  return (
+    // eslint-disable-next-line react/button-has-type
+    <button
+      className={cn(
+        'button',
+        `button--${variant}`,
+        { 'button--disabled': disabled },
+        className,
+      )}
+      disabled={disabled || loading}
+      {...rest}
+    >
+      {loading && !disabled ? (
+        <Loader
+          className={cn('button__loader', `button__loader--${variant}`)}
+        />
+      ) : (
+        children
+      )}
+    </button>
+  );
+}

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

@@ -0,0 +1,10 @@
+.checkbox {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  border-radius: 4px;
+  padding: 4px;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+}