@snack-uikit/toaster 0.8.13 → 0.8.14-preview-b5e187d5.0

package/src/components/ToastUpload/ToastUpload.tsx

@@ -0,0 +1,108 @@
+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 { ButtonAction } from './components/ButtonAction';
+import { FileItem } from './components/FileItem';
+import { LoadingStatus } from './components/LoadingStatus';
+import { progressBarAppearanceByStatus } from './constants';
+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;
+    className?: string;
+    items: UploadItem[];
+    collapsed: boolean;
+    onCollapsed: (collapsed: boolean) => void;
+    generalActions: UploadActions;
+  }>;
+
+export function ToastUpload({
+  status,
+  title,
+  description,
+  totalProgressCounter,
+  totalProgressPercentage,
+  closeToast,
+  onCloseClick,
+  closable,
+  className,
+  items,
+  collapsed,
+  onCollapsed,
+  generalActions,
+  ...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)}>
+      <div className={styles.titleLine}>
+        <div className={styles.titleLineBody}>
+          <div className={styles.title}>{title}</div>
+
+          <ButtonAction onClick={handleCollapseClick}>{collapsed ? <ChevronUpSVG /> : <ChevronDownSVG />}</ButtonAction>
+
+          {closable && (
+            <ButtonAction type='button' className={styles.buttonAction} onClick={handleCloseClick}>
+              <CrossSVG />
+            </ButtonAction>
+          )}
+        </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}>
+                {description}
+              </span>
+            </div>
+
+            <span className={styles.totalCounter}>{totalProgressCounter}</span>
+
+            <span className={styles.totalPercentage}>{formatPercent(totalProgressPercentage)}</span>
+          </div>
+
+          {!collapsed && (
+            <ProgressBar
+              progress={totalProgressPercentage}
+              size='xs'
+              appearance={progressBarAppearanceByStatus[status]}
+            />
+          )}
+        </div>
+      </div>
+
+      {collapsed && (
+        <div className={styles.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/components/ButtonAction/ButtonAction.tsx

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

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

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

package/src/components/ToastUpload/components/ButtonAction/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';
+
+.buttonAction {
+  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/components/FileItem/FileItem.tsx

@@ -0,0 +1,74 @@
+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 { progressBarAppearanceByStatus } from '../../constants';
+import { UploadItem } from '../../types';
+import { formatPercent } from '../../utils';
+import { ButtonAction } from '../ButtonAction';
+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}>
+      <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'
+          />
+        )}
+
+        {!showLink && (
+          <ButtonAction onClick={item.actions.onCancel}>
+            <CrossSVG />
+          </ButtonAction>
+        )}
+      </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/components/FileItem/index.ts

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

package/src/components/ToastUpload/components/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/components/LoadingStatus/LoadingStatus.tsx

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

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

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

package/src/components/ToastUpload/components/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/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/index.ts

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

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

@@ -0,0 +1,113 @@
+/* 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;
+}
+
+.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;
+}

package/src/components/ToastUpload/types.ts

@@ -0,0 +1,39 @@
+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: 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';

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

@@ -61,7 +61,7 @@
 }
 
 .containerWithCloseAllButton {
-  margin-bottom: calc(styles-theme-variables.$size-toaster-button-close-column + styles-theme-variables.$space-toaster-system-event-gap);
+  margin-bottom: calc(styles-theme-variables.$size-toaster-button-close-column + styles-theme-variables.$space-toaster-toast-system-event-gap);
 }
 
 @media only screen and (max-width: 480px) {

package/src/components/index.ts

@@ -1,3 +1,4 @@
 export * from './ToastSystemEvent';
 export * from './ToastUserAction';
 export * from './ToasterContainer';
+export * from './ToastUpload';

package/src/constants.ts

@@ -4,6 +4,7 @@ import { ToasterType } from './types';
 export const TOASTER_TYPE = {
   SystemEvent: 'system-event',
   UserAction: 'user-action',
+  Upload: 'upload',
 } as const;
 
 export const TOASTER_CONTAINER_DEFAULT_PROPS: Record<ToasterType, ToasterContainerProps> = {
@@ -19,11 +20,18 @@ export const TOASTER_CONTAINER_DEFAULT_PROPS: Record<ToasterType, ToasterContain
     displayCloseAllButton: false,
     type: TOASTER_TYPE.UserAction,
   },
+  [TOASTER_TYPE.Upload]: {
+    limit: 5,
+    position: 'bottom-right',
+    displayCloseAllButton: true,
+    type: TOASTER_TYPE.SystemEvent,
+  },
 };
 
-export const AUTO_CLOSE_TIME = {
+export const AUTO_CLOSE_TIME: Record<ToasterType, number | false> = {
   [TOASTER_TYPE.SystemEvent]: 5000,
   [TOASTER_TYPE.UserAction]: 2000,
+  [TOASTER_TYPE.Upload]: false,
 };
 
 export const TOASTER_ROOT_ID = 'toaster-root';