@snack-uikit/toaster 0.8.15 → 0.8.17-preview-bc9ca5dd.0

package/src/components/ToastUpload/ToastUpload.tsx

@@ -0,0 +1,169 @@
+import cn from 'classnames';
+import { MouseEvent } from 'react';
+import { ToastContentProps as RtToastContentProps } from 'react-toastify';
+
+import { ChevronDownSVG, ChevronUpSVG, CrossSVG } from '@snack-uikit/icons';
+import { ProgressBar } from '@snack-uikit/progress-bar';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { ButtonTextNeutral, ButtonTextNeutralProps } from '../../helperComponents/ButtonTextNeutral';
+import { TOAST_UPLOAD_TEST_IDS } from '../../testIds';
+import { progressBarAppearanceByStatus } from './constants';
+import { ButtonIcon } from './helperComponents/ButtonIcon';
+import { FileItem } from './helperComponents/FileItem';
+import { LoadingStatus } from './helperComponents/LoadingStatus';
+import styles from './styles.module.scss';
+import { ToastUploadStatus, UploadActions, UploadItem } from './types';
+import { formatPercent } from './utils';
+
+export type ToastUploadProps = Partial<RtToastContentProps> &
+  WithSupportProps<{
+    /**
+     * Общий статус загрузки
+     */
+    status: ToastUploadStatus;
+    /**
+     * Заголовок тостера
+     */
+    title: string;
+    /**
+     * Описание статуса загрузки
+     */
+    description: string;
+    /**
+     * Каунтер общего прогресса
+     */
+    totalProgressCounter: string;
+    /**
+     * Процент прогресса
+     */
+    totalProgressPercentage: number;
+    /**
+     * Закрыть тостер
+     */
+    onCloseClick?(e: MouseEvent<HTMLButtonElement>, close?: () => void): void;
+    /**
+     * Показывать кнопку закрытия тостера
+     */
+    closable?: boolean;
+    /**
+     * CSS-класс контейнера
+     */
+    className?: string;
+    /**
+     * Загружаемые элементы
+     */
+    items: UploadItem[];
+    /**
+     * Тостер свернут/развернут
+     */
+    collapsed: boolean;
+    /**
+     * Развернуть/свернуть тостер
+     */
+    onCollapsed: (collapsed: boolean) => void;
+    /**
+     * Экшены для управления загрузкой
+     */
+    generalActions: UploadActions;
+    /**
+     *  Отмена всей загрузки
+     */
+    cancelButton?: ButtonTextNeutralProps;
+  }>;
+
+export function ToastUpload({
+  status,
+  title,
+  description,
+  totalProgressCounter,
+  totalProgressPercentage,
+  closeToast,
+  onCloseClick,
+  closable,
+  className,
+  items,
+  collapsed,
+  onCollapsed,
+  generalActions,
+  cancelButton,
+  ...rest
+}: ToastUploadProps) {
+  const handleCloseClick = (e: MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    onCloseClick ? onCloseClick(e, closeToast) : closeToast?.();
+  };
+
+  const handleCollapseClick = (e: MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    onCollapsed(!collapsed);
+  };
+
+  return (
+    <div className={cn(styles.container, className)} {...extractSupportProps(rest)} data-collapsed={collapsed}>
+      <div className={styles.titleLine}>
+        <div className={styles.titleLineBody}>
+          <div className={styles.title} data-test-id={TOAST_UPLOAD_TEST_IDS.title}>
+            {title}
+          </div>
+
+          {cancelButton && <ButtonTextNeutral {...cancelButton} />}
+
+          <ButtonIcon onClick={handleCollapseClick} data-test-id={TOAST_UPLOAD_TEST_IDS.collapseButton}>
+            {collapsed ? <ChevronUpSVG /> : <ChevronDownSVG />}
+          </ButtonIcon>
+
+          {closable && (
+            <ButtonIcon
+              type='button'
+              className={styles.buttonAction}
+              onClick={handleCloseClick}
+              data-test-id={TOAST_UPLOAD_TEST_IDS.close}
+            >
+              <CrossSVG />
+            </ButtonIcon>
+          )}
+        </div>
+
+        <div className={styles.generalProgress}>
+          <div className={styles.statusLine}>
+            <div className={styles.statusWrap}>
+              <LoadingStatus status={status} actions={generalActions} />
+
+              <span
+                className={styles.description}
+                data-status={status}
+                data-test-id={TOAST_UPLOAD_TEST_IDS.description}
+              >
+                {description}
+              </span>
+            </div>
+
+            <span className={styles.totalCounter} data-test-id={TOAST_UPLOAD_TEST_IDS.counter}>
+              {totalProgressCounter}
+            </span>
+
+            <span className={styles.totalPercentage} data-test-id={TOAST_UPLOAD_TEST_IDS.progress}>
+              {formatPercent(totalProgressPercentage)}
+            </span>
+          </div>
+
+          {!collapsed && (
+            <ProgressBar
+              progress={totalProgressPercentage}
+              size='xs'
+              appearance={progressBarAppearanceByStatus[status]}
+              data-test-id={TOAST_UPLOAD_TEST_IDS.progressBar}
+            />
+          )}
+        </div>
+      </div>
+
+      <div className={styles.list} data-collapsed={collapsed} data-test-id={TOAST_UPLOAD_TEST_IDS.list}>
+        {items.map(item => (
+          <FileItem key={item.id} item={item} />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/ToastUpload/ToastUploadToaster.tsx

@@ -0,0 +1,11 @@
+import { useState } from 'react';
+
+import { ToastUpload, ToastUploadProps } from './ToastUpload';
+
+export type ToastUploadToasterProps = Omit<ToastUploadProps, 'collapsed' | 'onCollapsed'>;
+
+export function ToastUploadForToaster(props: ToastUploadToasterProps) {
+  const [collapsed, setCollapsed] = useState(true);
+
+  return <ToastUpload {...props} collapsed={collapsed} onCollapsed={setCollapsed} />;
+}

package/src/components/ToastUpload/constants.ts

@@ -0,0 +1,26 @@
+import { ProgressBarProps } from '@snack-uikit/progress-bar';
+
+import { ToastUploadStatus } from './types';
+
+export const TOAST_UPLOAD_STATUS = {
+  Loading: 'loading',
+  Pause: 'pause',
+  Error: 'error',
+  Uploaded: 'uploaded',
+  ErrorUploaded: 'errorUploaded',
+} as const;
+
+export const TOAST_UPLOAD_ITEM_STATUS = {
+  Loading: 'loading',
+  Pause: 'pause',
+  Error: 'error',
+  Uploaded: 'uploaded',
+} as const;
+
+export const progressBarAppearanceByStatus: Record<ToastUploadStatus, ProgressBarProps['appearance']> = {
+  pause: 'neutral',
+  loading: 'green',
+  uploaded: 'green',
+  errorUploaded: 'red',
+  error: 'red',
+};

package/src/components/ToastUpload/helperComponents/ButtonIcon/ButtonIcon.tsx

@@ -0,0 +1,10 @@
+import cn from 'classnames';
+import { ButtonHTMLAttributes } from 'react';
+
+import styles from './styles.module.scss';
+
+export type ButtonIconProps = ButtonHTMLAttributes<HTMLButtonElement>;
+
+export function ButtonIcon({ className, ...props }: ButtonIconProps) {
+  return <button type='button' className={cn(styles.buttonIcon, className)} {...props}></button>;
+}

package/src/components/ToastUpload/helperComponents/ButtonIcon/index.ts

@@ -0,0 +1 @@
+export * from './ButtonIcon';

package/src/components/ToastUpload/helperComponents/ButtonIcon/styles.module.scss

@@ -0,0 +1,45 @@
+/* stylelint-disable scss/operator-no-newline-after */
+
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toaster-toasterSystemEvent';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toaster-toasterUpload';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+@use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
+
+.buttonIcon {
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+
+  color: styles-theme-variables.$sys-invert-neutral-text-light;
+
+  background-color: transparent;
+  border: none;
+
+  svg {
+    width: styles-tokens-element.$icon-s !important; /* stylelint-disable-line declaration-no-important */
+    height: styles-tokens-element.$icon-s !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  &:hover {
+    color: styles-theme-variables.$sys-invert-neutral-text-main;
+  }
+
+  &:focus,
+  &:active {
+    color: styles-theme-variables.$sys-invert-neutral-accent-pressed;
+  }
+
+  &:focus-visible {
+    @include styles-theme-variables.outline-var(styles-tokens-element.$container-focused-s);
+
+    color: styles-theme-variables.$sys-invert-neutral-text-main;
+    outline-color: styles-theme-variables.$sys-available-on-complementary;
+    outline-offset: styles-theme-variables.$spacing-state-focus-offset;
+  }
+}

package/src/components/ToastUpload/helperComponents/FileItem/FileItem.tsx

@@ -0,0 +1,76 @@
+import { useEffect, useState } from 'react';
+
+import { CrossSVG } from '@snack-uikit/icons';
+import { Link } from '@snack-uikit/link';
+import { ProgressBar } from '@snack-uikit/progress-bar';
+
+import { TOAST_UPLOAD_TEST_IDS } from '../../../../testIds';
+import { progressBarAppearanceByStatus } from '../../constants';
+import { UploadItem } from '../../types';
+import { formatPercent } from '../../utils';
+import { ButtonIcon } from '../ButtonIcon';
+import { LoadingStatus } from '../LoadingStatus';
+import styles from './styles.module.scss';
+
+export type FileItemProps = { item: UploadItem };
+
+export function FileItem({ item: initItem }: FileItemProps) {
+  const [item, setItem] = useState(initItem);
+
+  const showLink = item.status === 'uploaded' && item.link;
+
+  useEffect(() => {
+    if (initItem.subscribeToState) {
+      return initItem.subscribeToState(newValue => setItem(prev => ({ ...prev, ...newValue })));
+    }
+
+    return setItem(initItem);
+  }, [initItem]);
+
+  return (
+    <div className={styles.fileLine} key={item.id} data-test-id={TOAST_UPLOAD_TEST_IDS.uploadItem}>
+      <div className={styles.fileHeadLine}>
+        <span className={styles.fileTitle}>{item.title}</span>
+
+        {showLink && (
+          <Link
+            text={item.link?.text}
+            href={item.link?.href}
+            size='m'
+            truncateVariant='end'
+            onClick={item.link?.onClick}
+            appearance='invert-neutral'
+            textMode='accent'
+            data-test-id={TOAST_UPLOAD_TEST_IDS.uploadItemLink}
+          />
+        )}
+
+        {!showLink && (
+          <ButtonIcon onClick={item.actions.onCancel} data-test-id={TOAST_UPLOAD_TEST_IDS.uploadItemCancel}>
+            <CrossSVG />
+          </ButtonIcon>
+        )}
+      </div>
+
+      <ProgressBar progress={item.progress} size='xs' appearance={progressBarAppearanceByStatus[item.status]} />
+
+      <div className={styles.fileStatusLine}>
+        <div className={styles.fileStatusWrap}>
+          <LoadingStatus status={item.status} actions={item.actions} />
+
+          <span className={styles.fileStatusDescription} data-status={item.status}>
+            {item.statusLabel}
+          </span>
+        </div>
+
+        <span className={styles.fileSize} data-status={item.status}>
+          {item.size}
+        </span>
+
+        <span className={styles.fileStatusPercentage} data-status={item.status}>
+          {formatPercent(item.progress)}
+        </span>
+      </div>
+    </div>
+  );
+}

package/src/components/ToastUpload/helperComponents/FileItem/index.ts

@@ -0,0 +1 @@
+export * from './FileItem';

package/src/components/ToastUpload/helperComponents/FileItem/styles.module.scss

@@ -0,0 +1,93 @@
+/* stylelint-disable scss/operator-no-newline-after */
+
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toaster-toasterSystemEvent';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toaster-toasterUpload';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+@use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
+
+.fileLine {
+  @include styles-theme-variables.composite-var(
+    styles-tokens-toaster-toasterUpload.$toaster-upload-file-line-container
+  );
+
+  display: flex;
+  flex-direction: column;
+}
+
+.fileHeadLine {
+  @include styles-theme-variables.composite-var(
+    styles-tokens-toaster-toasterUpload.$toaster-upload-file-line-headline
+  );
+
+  display: flex;
+  align-items: center;
+}
+
+.fileTitle {
+  @include styles-theme-variables.composite-var(styles-theme-variables.$sans-body-s);
+
+  flex-grow: 1;
+  color: styles-theme-variables.$sys-invert-neutral-text-main;
+}
+
+
+.fileStatusLine {
+  @include styles-theme-variables.composite-var(
+    styles-tokens-toaster-toasterUpload.$toaster-upload-status-line-container
+  );
+
+  display: flex;
+  align-items: center;
+}
+
+.fileStatusWrap {
+  @include styles-theme-variables.composite-var(
+    styles-tokens-toaster-toasterUpload.$toaster-upload-status-line-status-wrap
+  );
+
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+}
+
+.fileStatusDescription {
+  @include styles-theme-variables.composite-var(styles-theme-variables.$sans-body-s);
+
+  color: styles-theme-variables.$sys-invert-neutral-text-main;
+
+  &[data-status='loading'] {
+    color: styles-theme-variables.$sys-invert-neutral-text-disabled;
+  }
+
+  &[data-status='uploaded'] {
+    color: styles-theme-variables.$sys-invert-neutral-text-disabled;
+  }
+}
+
+.fileSize {
+  @include styles-theme-variables.composite-var(styles-theme-variables.$sans-body-s);
+
+  color: styles-theme-variables.$sys-invert-neutral-text-disabled;
+
+  &[data-status='loading'] {
+    color: styles-theme-variables.$sys-invert-neutral-text-main;
+  }
+
+  &[data-status='uploaded'] {
+    color: styles-theme-variables.$sys-invert-neutral-text-main;
+  }
+}
+
+.fileStatusPercentage {
+  @include styles-theme-variables.composite-var(styles-theme-variables.$sans-body-s);
+
+  color: styles-theme-variables.$sys-invert-neutral-text-disabled;
+
+  &[data-status='loading'] {
+    color: styles-theme-variables.$sys-invert-neutral-text-main;
+  }
+
+  &[data-status='uploaded'] {
+    color: styles-theme-variables.$sys-invert-neutral-text-main;
+  }
+}

package/src/components/ToastUpload/helperComponents/LoadingStatus/LoadingStatus.tsx

@@ -0,0 +1,38 @@
+import { CheckFilledSVG, PauseSVG, PlaySVG, UpdateSVG } from '@snack-uikit/icons';
+
+import { ToastUploadStatus, UploadActions } from '../../types';
+import { ButtonIcon } from '../ButtonIcon';
+import styles from './styles.module.scss';
+
+export type LoadingStatusProps = {
+  status: ToastUploadStatus;
+  actions: UploadActions;
+};
+
+export function LoadingStatus({ status, actions }: LoadingStatusProps) {
+  if (status === 'loading') {
+    return (
+      <ButtonIcon onClick={actions.onPause}>
+        <PauseSVG />
+      </ButtonIcon>
+    );
+  }
+
+  if (status === 'pause') {
+    return (
+      <ButtonIcon onClick={actions.onContinue}>
+        <PlaySVG />
+      </ButtonIcon>
+    );
+  }
+
+  if (status === 'uploaded') {
+    return <CheckFilledSVG className={styles.successIcon} />;
+  }
+
+  return (
+    <ButtonIcon onClick={actions.onRetry}>
+      <UpdateSVG />
+    </ButtonIcon>
+  );
+}

package/src/components/ToastUpload/helperComponents/LoadingStatus/index.ts

@@ -0,0 +1 @@
+export * from './LoadingStatus';

package/src/components/ToastUpload/helperComponents/LoadingStatus/styles.module.scss

@@ -0,0 +1,8 @@
+/* stylelint-disable scss/operator-no-newline-after */
+
+@use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
+
+
+.successIcon {
+  color: styles-theme-variables.$sys-green-accent-default;
+}

package/src/components/ToastUpload/index.ts

@@ -0,0 +1 @@
+export * from './ToastUpload';

package/src/components/ToastUpload/styles.module.scss

@@ -0,0 +1,123 @@
+/* stylelint-disable scss/operator-no-newline-after */
+
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toaster-toasterSystemEvent';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toaster-toasterUpload';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+@use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
+
+.container {
+  @include styles-theme-variables.composite-var(styles-tokens-toaster-toasterUpload.$toaster-upload-toast-container);
+
+  cursor: default;
+
+  position: relative;
+
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  box-sizing: border-box;
+  width: calc(
+    styles-tokens-toaster-toasterSystemEvent.$size-toaster-toast-system-event-container -
+      (2 * styles-tokens-toaster-toasterUpload.$space-toaster-toast-system-event-container-padding)
+  );
+  max-width: 100%;
+  max-height: 386px;
+  padding: styles-tokens-toaster-toasterUpload.$space-toaster-toast-system-event-container-padding 0;
+
+  background-color: styles-theme-variables.$sys-invert-neutral-background;
+
+  &[data-collapsed='false'] {
+    gap: 0;
+  }
+}
+
+.titleLine {
+  display: flex;
+  flex-direction: column;
+  padding: 0 styles-tokens-toaster-toasterUpload.$space-toaster-toast-system-event-container-padding;
+}
+
+.titleLineBody {
+  @include styles-theme-variables.composite-var(styles-tokens-toaster-toasterUpload.$toaster-upload-title-line-body);
+
+  display: flex;
+  align-items: center;
+}
+
+.title {
+  @include styles-theme-variables.composite-var(styles-theme-variables.$sans-title-s);
+
+  flex-grow: 1;
+  color: styles-theme-variables.$sys-invert-neutral-text-main;
+}
+
+.generalProgress {
+  @include styles-theme-variables.composite-var(
+    styles-tokens-toaster-toasterUpload.$toaster-upload-title-line-general-progress
+  );
+
+  display: flex;
+  flex-direction: column;
+  align-self: stretch;
+}
+
+.statusLine {
+  @include styles-theme-variables.composite-var(
+    styles-tokens-toaster-toasterUpload.$toaster-upload-status-line-container
+  );
+
+  display: flex;
+  align-items: center;
+}
+
+.statusWrap {
+  @include styles-theme-variables.composite-var(
+    styles-tokens-toaster-toasterUpload.$toaster-upload-status-line-status-wrap
+  );
+
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+}
+
+.description {
+  @include styles-theme-variables.composite-var(styles-theme-variables.$sans-body-m);
+
+  color: styles-theme-variables.$sys-invert-neutral-text-main;
+
+  &[data-status='loading'] {
+    color: styles-theme-variables.$sys-invert-neutral-text-light;
+  }
+
+  &[data-status='uploaded'] {
+    color: styles-theme-variables.$sys-invert-neutral-text-light;
+  }
+}
+
+.totalCounter {
+  @include styles-theme-variables.composite-var(styles-theme-variables.$sans-body-m);
+
+  color: styles-theme-variables.$sys-invert-neutral-text-support;
+}
+
+.totalPercentage {
+  @include styles-theme-variables.composite-var(styles-theme-variables.$sans-body-m);
+
+  color: styles-theme-variables.$sys-invert-neutral-text-support;
+}
+
+.list {
+  overflow: scroll;
+  display: flex;
+  flex-direction: column;
+
+  max-height: 280px;
+  padding: 0 styles-tokens-toaster-toasterUpload.$space-toaster-toast-system-event-container-padding;
+
+  transition: all 0.1s;
+
+  &[data-collapsed='false'] {
+    max-height: 0;
+  }
+}

package/src/components/ToastUpload/types.ts

@@ -0,0 +1,67 @@
+import { MouseEvent } from 'react';
+
+import { ProgressBarProps } from '@snack-uikit/progress-bar';
+import { ValueOf } from '@snack-uikit/utils';
+
+import { TOAST_UPLOAD_ITEM_STATUS, TOAST_UPLOAD_STATUS } from './constants';
+
+export type ToastUploadStatus = ValueOf<typeof TOAST_UPLOAD_STATUS>;
+
+export type ToastUploadItemStatus = ValueOf<typeof TOAST_UPLOAD_ITEM_STATUS>;
+
+export type ToastUploadStateSubscription<T> = (subscription: (newValue: T) => void) => () => void;
+export type WithStateSubscription<T> = {
+  /**Позволяет подписываться на изменения процесса загрузки файла внутри конпонента,
+   * тем самым обновляет элементы не зависимо от всего списка
+   * (можно использовать для улучшения производительности из-за частых обновлений)
+   */
+  subscribeToState?: ToastUploadStateSubscription<Partial<T>>;
+} & T;
+
+export type ToastUploadItemLink = {
+  text: string;
+  href: string;
+  onClick?(e: MouseEvent<HTMLAnchorElement>): void;
+};
+
+export type UploadActions = {
+  onCancel?: () => void;
+  onPause?: () => void;
+  onRetry?: () => void;
+  onContinue?: () => void;
+};
+
+export type UploadItem = WithStateSubscription<{
+  /**
+   * Уникальный id элемента
+   */
+  id: string;
+  /**
+   * Название элемента
+   */
+  title: string;
+  /**
+   * Статус загрузки
+   */
+  status: ToastUploadItemStatus;
+  /**
+   * Описание статуса загрузки
+   */
+  statusLabel: string;
+  /**
+   * Процент прогресса
+   */
+  progress: ProgressBarProps['progress'];
+  /**
+   * Размер файла
+   */
+  size: string;
+  /**
+   * Экшены для управления загрузкой
+   */
+  actions: UploadActions;
+  /**
+   * Ссылка на файл
+   */
+  link?: ToastUploadItemLink;
+}>;

package/src/components/ToastUpload/utils/formatPercent.ts

@@ -0,0 +1 @@
+export const formatPercent = (value: number) => `${value}%`;

package/src/components/ToastUpload/utils/index.ts

@@ -0,0 +1 @@
+export * from './formatPercent';