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

package/dist/esm/components/ToastUpload/types.d.ts

@@ -1,59 +0,0 @@
-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/dist/esm/components/ToastUpload/types.js

@@ -1 +0,0 @@
-export {};

package/dist/esm/components/ToastUpload/utils/formatPercent.d.ts

@@ -1 +0,0 @@
-export declare const formatPercent: (value: number) => string;

package/dist/esm/components/ToastUpload/utils/formatPercent.js

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

package/dist/esm/components/ToastUpload/utils/index.d.ts

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

package/dist/esm/components/ToastUpload/utils/index.js

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

package/dist/esm/helperComponents/ButtonTextNeutral/ButtonTextNeutral.d.ts

@@ -1,7 +0,0 @@
-import { MouseEvent } from 'react';
-export type ButtonTextNeutralProps = {
-    label: string;
-    onClick(e: MouseEvent<HTMLButtonElement>): void;
-    critical?: boolean;
-};
-export declare function ButtonTextNeutral({ label, onClick, critical }: ButtonTextNeutralProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/ButtonTextNeutral/ButtonTextNeutral.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import styles from './styles.module.css';
-export function ButtonTextNeutral({ label, onClick, critical }) {
-    return (_jsx("button", { type: 'button', className: styles.buttonTextNeutral, onClick: onClick, "aria-label": 'action', "data-critical": critical || undefined, children: label }));
-}

package/dist/esm/helperComponents/ButtonTextNeutral/index.d.ts

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

package/dist/esm/helperComponents/ButtonTextNeutral/index.js

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

package/dist/esm/helperComponents/ButtonTextNeutral/styles.module.css

@@ -1,32 +0,0 @@
-.buttonTextNeutral{
-  font-family:var(--sans-body-m-font-family, SB Sans Interface);
-  font-weight:var(--sans-body-m-font-weight, Regular);
-  line-height:var(--sans-body-m-line-height, 20px);
-  font-size:var(--sans-body-m-font-size, 14px);
-  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
-  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
-  cursor:pointer;
-  display:flex;
-  align-items:center;
-  justify-content:center;
-  box-sizing:border-box;
-  margin:0;
-  padding:0;
-  color:var(--sys-invert-neutral-text-light, #8b8e9b);
-  background-color:transparent;
-  border:none;
-}
-.buttonTextNeutral:hover{
-  color:var(--sys-invert-neutral-text-main, #e6e8ef);
-}
-.buttonTextNeutral:focus, .buttonTextNeutral:active{
-  color:var(--sys-invert-neutral-accent-pressed, #aaaebd);
-}
-.buttonTextNeutral:focus-visible{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-  color:var(--sys-invert-neutral-text-main, #e6e8ef);
-  outline-color:var(--sys-available-on-complementary, #ffffff);
-  outline-offset:var(--spacing-state-focus-offset, 2px);
-}

package/src/components/ToastUpload/ToastUpload.tsx

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

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

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

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

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

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

@@ -1,45 +0,0 @@
-/* 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

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

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

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

@@ -1,93 +0,0 @@
-/* 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

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

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

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

@@ -1,8 +0,0 @@
-/* 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

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