@snack-uikit/toaster 0.8.19 → 0.9.0

package/src/components/ToastUpload/ToastUpload.tsx

@@ -0,0 +1,182 @@
+import cn from 'classnames';
+import { MouseEvent } from 'react';
+import { ToastContentProps as RtToastContentProps } from 'react-toastify';
+import { useUncontrolledProp } from 'uncontrollable';
+
+import { ChevronDownSVG, ChevronUpSVG, CrossSVG } from '@snack-uikit/icons';
+import { useLocale } from '@snack-uikit/locale';
+import { ProgressBar } from '@snack-uikit/progress-bar';
+import { Scroll } from '@snack-uikit/scroll';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { TOAST_UPLOAD_TEST_IDS } from '../../testIds';
+import { progressBarAppearanceByStatus } from './constants';
+import { ButtonIcon } from './helperComponents/ButtonIcon';
+import { ButtonTextNeutral, ButtonTextNeutralProps } from './helperComponents/ButtonTextNeutral';
+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;
+    /**
+     * Общий прогресс загрузки
+     */
+    progress: {
+      current: number;
+      total: number;
+    };
+    /**
+     * Закрыть тостер
+     */
+    onCloseClick?(e: MouseEvent<HTMLButtonElement>, close?: () => void): void;
+    /**
+     * Показывать кнопку закрытия тостера
+     */
+    closable?: boolean;
+    /**
+     * CSS-класс контейнера
+     */
+    className?: string;
+    /**
+     * Загружаемые элементы
+     */
+    files: UploadItem[];
+    /**
+     * Тостер свернут/развернут
+     */
+    collapsed?: boolean;
+    /**
+     * Развернуть/свернуть тостер
+     */
+    onCollapsed?: (collapsed: boolean) => void;
+    /**
+     * Экшены для управления загрузкой
+     */
+    generalActions: Omit<UploadActions, 'onCancel'>;
+    /**
+     *  Отмена всей загрузки
+     */
+    cancelButton?: ButtonTextNeutralProps;
+  }>;
+
+export function ToastUpload({
+  status,
+  title,
+  description,
+  closeToast,
+  onCloseClick,
+  closable,
+  className,
+  files,
+  collapsed,
+  onCollapsed,
+  generalActions,
+  cancelButton,
+  progress,
+  ...rest
+}: ToastUploadProps) {
+  const [isCollapsed, setIsCollapsed] = useUncontrolledProp(collapsed, false, onCollapsed);
+
+  const { t } = useLocale('ToastUpload');
+
+  const showingTitle = title || t(`title.${status}`);
+
+  const handleCloseClick = (e: MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    onCloseClick ? onCloseClick(e, closeToast) : closeToast?.();
+  };
+
+  const handleCollapseClick = (e: MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    setIsCollapsed(!isCollapsed);
+  };
+
+  const progressPercent = Math.round((progress.current / progress.total) * 100);
+  const isErrorUploaded = status === 'errorUploaded';
+
+  return (
+    <div
+      className={cn(styles.container, className)}
+      {...extractSupportProps(rest)}
+      data-collapsed={isCollapsed || undefined}
+    >
+      <div className={styles.titleLine}>
+        <div className={styles.titleLineBody}>
+          <div className={styles.title} data-test-id={TOAST_UPLOAD_TEST_IDS.title}>
+            {showingTitle}
+          </div>
+
+          {cancelButton && <ButtonTextNeutral {...cancelButton} />}
+
+          <ButtonIcon onClick={handleCollapseClick} data-test-id={TOAST_UPLOAD_TEST_IDS.collapseButton}>
+            {!isCollapsed ? <ChevronUpSVG /> : <ChevronDownSVG />}
+          </ButtonIcon>
+
+          {closable && (
+            <ButtonIcon
+              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} />
+
+              <TruncateString
+                className={styles.description}
+                data-status={status}
+                text={description}
+                data-test-id={TOAST_UPLOAD_TEST_IDS.description}
+              />
+            </div>
+
+            <span className={styles.totalCounter} data-test-id={TOAST_UPLOAD_TEST_IDS.counter}>
+              {`${progress.current}/${progress.total}`}
+            </span>
+
+            <span className={styles.totalPercentage} data-test-id={TOAST_UPLOAD_TEST_IDS.progress}>
+              {formatPercent(isErrorUploaded ? 0 : progressPercent)}
+            </span>
+          </div>
+
+          {isCollapsed && (
+            <ProgressBar
+              progress={isErrorUploaded ? 100 : progressPercent}
+              size='xs'
+              appearance={progressBarAppearanceByStatus[status]}
+              data-test-id={TOAST_UPLOAD_TEST_IDS.progressBar}
+            />
+          )}
+        </div>
+      </div>
+
+      <Scroll className={styles.list} size='s' data-test-id={TOAST_UPLOAD_TEST_IDS.list} barHideStrategy='never'>
+        {files.map(item => (
+          <FileItem key={item.id || item.title} item={item} />
+        ))}
+      </Scroll>
+    </div>
+  );
+}

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,43 @@
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toaster-toasterSystemEvent';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+@use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
+
+.buttonIcon {
+  @include styles-tokens-toaster-toasterSystemEvent.composite-var(styles-tokens-toaster-toasterSystemEvent.$toaster-system-event-toast-button-button-neutral);
+
+  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;
+  }
+
+  &: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/ButtonTextNeutral/ButtonTextNeutral.tsx

@@ -0,0 +1,23 @@
+import { MouseEvent } from 'react';
+
+import styles from './styles.module.scss';
+
+export type ButtonTextNeutralProps = {
+  label: string;
+  onClick(e: MouseEvent<HTMLButtonElement>): void;
+  critical?: boolean;
+};
+
+export function ButtonTextNeutral({ label, onClick, critical }: ButtonTextNeutralProps) {
+  return (
+    <button
+      type='button'
+      className={styles.buttonTextNeutral}
+      onClick={onClick}
+      aria-label='action'
+      data-critical={critical || undefined}
+    >
+      {label}
+    </button>
+  );
+}

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

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

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

@@ -0,0 +1,38 @@
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toaster-toasterSystemEvent';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+@use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
+
+.buttonTextNeutral {
+  @include styles-tokens-toaster-toasterSystemEvent.composite-var(styles-tokens-toaster-toasterSystemEvent.$toaster-system-event-toast-button-button-neutral);
+  @include styles-theme-variables.composite-var(styles-theme-variables.$sans-body-m);
+
+  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;
+
+  &:hover {
+    color: styles-theme-variables.$sys-invert-neutral-text-main;
+  }
+
+  &:active {
+    color: styles-theme-variables.$sys-invert-neutral-accent-pressed;
+  }
+
+  &:focus-visible {
+    @include styles-theme-variables.outline-var(styles-tokens-element.$container-focused-s);
+
+    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,83 @@
+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 { TruncateString } from '@snack-uikit/truncate-string';
+
+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;
+
+  const showCancelButton = !showLink;
+
+  useEffect(() => {
+    if (initItem.subscribeToState) {
+      initItem.subscribeToState(newValue => setItem(prev => ({ ...prev, ...newValue })));
+    }
+
+    return setItem(initItem);
+  }, [initItem]);
+
+  const isError = item.status === 'error';
+
+  return (
+    <div className={styles.fileLine} data-test-id={TOAST_UPLOAD_TEST_IDS.uploadItem}>
+      <div className={styles.fileHeadLine}>
+        <TruncateString text={item.title} className={styles.fileTitle} maxLines={1} />
+
+        {showLink && (
+          <Link
+            text={item.link?.text}
+            href={item.link?.href}
+            size='s'
+            truncateVariant='end'
+            onClick={item.link?.onClick}
+            appearance='invert-neutral'
+            textMode='accent'
+            data-test-id={TOAST_UPLOAD_TEST_IDS.uploadItemLink}
+          />
+        )}
+
+        {showCancelButton && (
+          <ButtonIcon onClick={item.actions.onCancel} data-test-id={TOAST_UPLOAD_TEST_IDS.uploadItemCancel}>
+            <CrossSVG />
+          </ButtonIcon>
+        )}
+      </div>
+
+      <ProgressBar
+        progress={isError ? 100 : item.progress}
+        size='xs'
+        appearance={progressBarAppearanceByStatus[item.status]}
+      />
+
+      <div className={styles.fileStatusLine}>
+        <div className={styles.fileStatusWrap}>
+          <LoadingStatus status={item.status} actions={item.actions} isFileItem />
+
+          <TruncateString className={styles.fileStatusDescription} data-status={item.status} text={item.statusLabel} />
+        </div>
+
+        <span className={styles.fileSize} data-status={item.status}>
+          {item.formattedSize}
+        </span>
+
+        <span className={styles.fileStatusPercentage} data-status={item.status}>
+          {formatPercent(isError ? 0 : 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,91 @@
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toaster-toasterUpload';
+@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
+  );
+
+  overflow: hidden;
+  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;
+  text-wrap: nowrap;
+
+  &[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,39 @@
+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;
+  isFileItem?: boolean;
+};
+
+export function LoadingStatus({ status, actions, isFileItem }: LoadingStatusProps) {
+  if (status === 'loading' || (status === 'error' && !isFileItem)) {
+    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,5 @@
+@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,121 @@
+@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/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 - styles-tokens-toaster-toasterUpload.$space-toaster-toast-system-event-container-padding
+  );
+  max-width: 100%;
+  max-height: 386px;
+
+  background-color: styles-theme-variables.$sys-invert-neutral-background;
+
+  &[data-collapsed] {
+    gap: 0;
+  }
+}
+
+.titleLine {
+  display: flex;
+  flex-direction: column;
+}
+
+.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
+  );
+
+  overflow: hidden;
+  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-x: hidden;
+  display: flex;
+  flex-direction: column;
+
+  box-sizing: content-box;
+  max-height: 288px;
+  margin-top: 0;
+  // TODO: use tokens
+  padding-right: calc(#{styles-theme-variables.$space-toaster-toast-system-event-container-padding} - #{styles-theme-variables.$dimension-050m});
+
+  transition: all 0.1s;
+
+  [data-collapsed] & {
+    max-height: 0;
+  }
+}