@snack-uikit/toaster 0.3.21-preview-85c5f47b.0

package/src/components/ToastSystemEvent/utils.tsx

@@ -0,0 +1,18 @@
+import { AlarmFilledSVG, CheckFilledSVG, CrossFilledSVG, InfoFilledSVG } from '@snack-uikit/icons';
+
+import { ToastSystemEventAppearance } from './constants';
+
+export function getIcon(appearance: ToastSystemEventAppearance) {
+  switch (appearance) {
+    case ToastSystemEventAppearance.Success:
+      return <CheckFilledSVG />;
+    case ToastSystemEventAppearance.Error:
+    case ToastSystemEventAppearance.ErrorCritical:
+      return <CrossFilledSVG />;
+    case ToastSystemEventAppearance.Warning:
+      return <AlarmFilledSVG />;
+    case ToastSystemEventAppearance.Neutral:
+    default:
+      return <InfoFilledSVG />;
+  }
+}

package/src/components/ToastUserAction/ToastUserAction.tsx

@@ -0,0 +1,68 @@
+import cn from 'classnames';
+import { MouseEvent, useMemo } from 'react';
+import { ToastContentProps as RtToastContentProps } from 'react-toastify';
+
+import { Link } from '@snack-uikit/link';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { TOAST_USER_ACTION_TEST_IDS } from '../../testIds';
+import { ToastUserActionAppearance, Variant } from './constants';
+import styles from './styles.module.scss';
+import { getIcon } from './utils';
+
+export type ToastUserActionLink = {
+  text: string;
+  href: string;
+  onClick?(e: MouseEvent<HTMLAnchorElement>): void;
+};
+
+export type ToastUserActionProps = Partial<RtToastContentProps> &
+  WithSupportProps<{
+    label: string;
+    appearance?: ToastUserActionAppearance;
+    link?: ToastUserActionLink;
+    className?: string;
+  }>;
+
+export function ToastUserAction({
+  appearance = ToastUserActionAppearance.Neutral,
+  label,
+  link,
+  className,
+  ...rest
+}: ToastUserActionProps) {
+  const icon = useMemo(() => getIcon(appearance), [appearance]);
+
+  return (
+    <div
+      className={cn(styles.container, className)}
+      {...extractSupportProps(rest)}
+      data-appearance={appearance}
+      data-variant={icon ? Variant.WithIcon : Variant.LabelOnly}
+    >
+      <div className={styles.content}>
+        {icon && (
+          <span className={styles.icon} data-test-id={TOAST_USER_ACTION_TEST_IDS.icon}>
+            {icon}
+          </span>
+        )}
+        <span className={styles.label} data-test-id={TOAST_USER_ACTION_TEST_IDS.label}>
+          {label}
+        </span>
+      </div>
+
+      {link && (
+        <Link
+          size={Link.sizes.M}
+          text={link.text}
+          href={link.href}
+          onClick={link.onClick}
+          onColor={Link.onColors.InvertNeutral}
+          data-test-id={TOAST_USER_ACTION_TEST_IDS.link}
+        />
+      )}
+    </div>
+  );
+}
+
+ToastUserAction.appearances = ToastUserActionAppearance;

package/src/components/ToastUserAction/constants.tsx

@@ -0,0 +1,11 @@
+export enum ToastUserActionAppearance {
+  Neutral = 'neutral',
+  Success = 'success',
+  Error = 'error',
+  Warning = 'warning',
+}
+
+export enum Variant {
+  WithIcon = 'with-icon',
+  LabelOnly = 'label-only',
+}

package/src/components/ToastUserAction/index.ts

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

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

@@ -0,0 +1,66 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toaster-toasterUserAction';
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+@import '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
+
+
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    width: $icon-s !important; /* stylelint-disable-line declaration-no-important */
+    height: $icon-s !important; /* stylelint-disable-line declaration-no-important */
+  }
+}
+
+.label {
+  @include composite-var($sans-label-l);
+
+  color: $sys-invert-neutral-text-main;
+}
+
+.content {
+  @include composite-var($toaster-user-action-toast-content);
+
+  display: flex;
+  align-items: center
+}
+
+
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  box-sizing: border-box;
+
+  background-color: $sys-invert-neutral-background;
+
+  &[data-variant='label-only'] {
+    @include composite-var($toaster-user-action-toast-container-label-only);
+  }
+
+  &[data-variant='with-icon'] {
+    @include composite-var($toaster-user-action-toast-container-with-icon);
+  }
+
+  &[data-appearance='error'] {
+    .icon {
+      color: $sys-red-accent-default;
+    }
+  }
+
+  &[data-appearance='warning'] {
+    .icon {
+      color: $sys-yellow-accent-default;
+    }
+  }
+
+  &[data-appearance='success'] {
+    .icon {
+      color: $sys-green-accent-default;
+    }
+  }
+}
+

package/src/components/ToastUserAction/utils.tsx

@@ -0,0 +1,17 @@
+import { AlarmFilledSVG, CheckFilledSVG, CrossFilledSVG } from '@snack-uikit/icons';
+
+import { ToastUserActionAppearance } from './constants';
+
+export function getIcon(appearance: ToastUserActionAppearance) {
+  switch (appearance) {
+    case ToastUserActionAppearance.Success:
+      return <CheckFilledSVG />;
+    case ToastUserActionAppearance.Error:
+      return <CrossFilledSVG />;
+    case ToastUserActionAppearance.Warning:
+      return <AlarmFilledSVG />;
+    case ToastUserActionAppearance.Neutral:
+    default:
+      return null;
+  }
+}

package/src/components/ToasterContainer/ToasterContainer.tsx

@@ -0,0 +1,93 @@
+import 'react-toastify/dist/ReactToastify.css';
+
+import cn from 'classnames';
+import { useEffect, useState } from 'react';
+import {
+  toast,
+  ToastContainer as RtToastContainer,
+  ToastContainerProps as RtToastContainerProps,
+  ToastItem,
+  ToastPosition,
+} from 'react-toastify';
+
+import { TOASTER_CONTAINER_PREFIX } from '../../constants';
+import { TOAST_SYSTEM_EVENT_TEST_IDS } from '../../testIds';
+import { ToasterType } from '../../types';
+import styles from './styles.module.scss';
+
+export type ToasterContainerProps = {
+  position?: ToastPosition;
+  limit?: number;
+  containerId?: RtToastContainerProps['containerId'];
+  displayCloseAllButton?: boolean;
+  type?: ToasterType;
+};
+
+export function ToasterContainer({
+  position = toast.POSITION.BOTTOM_RIGHT,
+  limit = 5,
+  containerId,
+  displayCloseAllButton,
+  type = ToasterType.SystemEvent,
+}: ToasterContainerProps) {
+  const [notificationCounter, setNotificationCounter] = useState(0);
+  const [isCloseAllButtonHidden, setIsCloseAllButtonHidden] = useState(false);
+  const closeAll = () => {
+    toast.dismiss();
+    setIsCloseAllButtonHidden(true);
+  };
+
+  useEffect(() => {
+    const unsubscribe = toast.onChange(({ status, containerId }: ToastItem) => {
+      if (containerId === `${TOASTER_CONTAINER_PREFIX}${ToasterType.SystemEvent}`) {
+        if (status === 'added') {
+          setIsCloseAllButtonHidden(false);
+          setNotificationCounter(prev => prev + 1);
+        }
+        if (status === 'removed') {
+          setNotificationCounter(prev => prev - 1);
+        }
+      }
+    });
+
+    return unsubscribe;
+  }, []);
+
+  const hasCloseAllButton = displayCloseAllButton && notificationCounter > 2 && !isCloseAllButtonHidden;
+
+  return (
+    <>
+      <RtToastContainer
+        hideProgressBar
+        closeOnClick={false}
+        autoClose={false}
+        closeButton={false}
+        draggable={false}
+        className={cn(styles[`container-${type}`], styles[position], {
+          [styles.containerWithCloseAllButton]: hasCloseAllButton,
+        })}
+        toastClassName={styles.toaster}
+        bodyClassName={styles.toaster}
+        position={position}
+        limit={limit}
+        containerId={containerId}
+        enableMultiContainer={Boolean(containerId)}
+      />
+
+      {hasCloseAllButton && (
+        <div className={cn(styles.buttonCloseColumnWrapper, styles[position])}>
+          <button
+            className={styles.buttonCloseColumn}
+            onClick={closeAll}
+            data-test-id={TOAST_SYSTEM_EVENT_TEST_IDS.buttonCloseColumn}
+          >
+            {/* TODO add translations */}
+            Закрыть все
+          </button>
+        </div>
+      )}
+    </>
+  );
+}
+
+ToasterContainer.position = toast.POSITION;

package/src/components/ToasterContainer/index.ts

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

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

@@ -0,0 +1,81 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toaster-toasterSystemEvent';
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toaster-toasterUserAction';
+@import '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+
+.buttonCloseColumnWrapper {
+  @include composite-var($toaster-system-event-toaster-container);
+
+  position: fixed;
+  box-sizing: border-box;
+}
+
+.buttonCloseColumn {
+  @include composite-var($toaster-system-event-toaster-button-close-column);
+  @include composite-var($sans-body-m);
+
+  cursor: pointer;
+
+  box-sizing: border-box;
+  width: 100%;
+
+  color: $sys-invert-neutral-text-main;
+
+  background-color: $sys-invert-neutral-background;
+  border: none;
+  outline: none;
+
+  &:hover {
+    background-color: $sys-invert-neutral-decor-hovered;
+  }
+
+  &:focus-visible {
+    @include outline-var($container-focused-s);
+
+    background-color: $sys-invert-neutral-decor-hovered;
+    outline-color: $sys-available-complementary;
+    outline-offset: $spacing-state-focus-offset;
+  }
+
+  &:active {
+    color: $sys-invert-neutral-text-light;
+  }
+}
+
+.container-system-event {
+  @include composite-var($toaster-system-event-toaster-container);
+
+  display: flex;
+  flex-direction: column;
+}
+
+.container-user-action {
+  @include composite-var($toaster-user-action-toaster-container);
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: fit-content;
+}
+
+.bottom-right {
+  right: 0;
+  bottom: 0;
+}
+
+.bottom-center {
+  bottom: 0
+}
+
+.toaster {
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.containerWithCloseAllButton {
+  margin-bottom: calc($size-toaster-button-close-column + $space-toaster-system-event-gap);
+}

package/src/components/index.ts

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

package/src/constants.ts

@@ -0,0 +1,25 @@
+import { ToasterContainer, ToasterContainerProps } from './components';
+import { ToasterType } from './types';
+
+export const TOASTER_CONTAINER_DEFAULT_PROPS: Record<ToasterType, ToasterContainerProps> = {
+  [ToasterType.SystemEvent]: {
+    limit: 5,
+    position: ToasterContainer.position.BOTTOM_RIGHT,
+    displayCloseAllButton: true,
+    type: ToasterType.SystemEvent,
+  },
+  [ToasterType.UserAction]: {
+    limit: 2,
+    position: ToasterContainer.position.BOTTOM_CENTER,
+    displayCloseAllButton: false,
+    type: ToasterType.UserAction,
+  },
+};
+
+export const AUTO_CLOSE_TIME = {
+  [ToasterType.SystemEvent]: 5000,
+  [ToasterType.UserAction]: 2000,
+};
+
+export const TOASTER_ROOT_ID = 'toaster-root';
+export const TOASTER_CONTAINER_PREFIX = 'toaster-container__';

package/src/helpers.tsx

@@ -0,0 +1,293 @@
+// eslint-disable-next-line react/no-deprecated
+import { render } from 'react-dom';
+import { toast, ToastOptions as RtToastOptions } from 'react-toastify';
+
+import {
+  ToasterContainer,
+  ToasterContainerProps,
+  ToastSystemEvent,
+  ToastSystemEventProps,
+  ToastUserAction,
+  ToastUserActionProps,
+} from './components';
+import {
+  AUTO_CLOSE_TIME,
+  TOASTER_CONTAINER_DEFAULT_PROPS,
+  TOASTER_CONTAINER_PREFIX,
+  TOASTER_ROOT_ID,
+} from './constants';
+import {
+  OpenToast,
+  Toaster,
+  ToasterId,
+  ToasterPropsMap,
+  ToasterType,
+  ToastOptions,
+  UpdateToast,
+  UserActionOptions,
+} from './types';
+
+function getToasterContainer({
+  type,
+  toasterParent,
+  containerProps,
+}: {
+  type: ToasterType;
+  toasterParent: HTMLElement;
+  containerProps?: ToasterContainerProps;
+}) {
+  const containerId = containerProps?.containerId || `${TOASTER_CONTAINER_PREFIX}${type}`;
+
+  const toasterContainerProps = {
+    ...TOASTER_CONTAINER_DEFAULT_PROPS[type],
+    ...(containerProps || {}),
+    containerId,
+  };
+
+  const toasterRootId = `${TOASTER_ROOT_ID}__${type}`;
+
+  let rootInDOM = toasterParent.querySelector(`#${toasterRootId}`);
+
+  if (!rootInDOM) {
+    rootInDOM = document.createElement('div');
+    rootInDOM.id = toasterRootId;
+    toasterParent.appendChild(rootInDOM);
+  }
+
+  return {
+    toasterContainer: rootInDOM,
+    toasterContainerProps,
+  };
+}
+
+function getToastOptions<T extends keyof ToasterPropsMap>({
+  type,
+  toastOptions,
+  containerId,
+}: {
+  type: T;
+  toasterProps?: ToasterPropsMap[T];
+  toastOptions?: ToastOptions;
+  containerId?: ToasterContainerProps['containerId'];
+}): RtToastOptions {
+  return {
+    toastId: toastOptions?.id,
+    autoClose: AUTO_CLOSE_TIME[type],
+    containerId: containerId || `${TOASTER_CONTAINER_PREFIX}${type}`,
+  };
+}
+
+function getToastComponent<T extends keyof ToasterPropsMap>({
+  type,
+  toasterProps,
+}: {
+  type: T;
+  toasterProps: ToasterPropsMap[T];
+}) {
+  switch (type) {
+    case ToasterType.UserAction:
+      return <ToastUserAction {...(toasterProps as ToastUserActionProps)} />;
+    case ToasterType.SystemEvent:
+      return <ToastSystemEvent {...(toasterProps as ToastSystemEventProps)} />;
+    default:
+      return undefined;
+  }
+}
+
+export const openToast: OpenToast = ({
+  type,
+  toasterProps,
+  containerProps,
+  toastOptions,
+  toasterParent = document.body,
+}) => {
+  const { toasterContainer, toasterContainerProps } = getToasterContainer({
+    type,
+    toasterParent,
+    containerProps,
+  });
+
+  const options = getToastOptions({
+    type,
+    toasterProps,
+    toastOptions,
+    containerId: toasterContainerProps.containerId,
+  });
+
+  const toasterComponent = getToastComponent({
+    type,
+    toasterProps,
+  });
+
+  return new Promise(resolve => {
+    render(<ToasterContainer {...toasterContainerProps} />, toasterContainer, () => {
+      setTimeout(() => {
+        resolve(toast(toasterComponent, options));
+      }, 0);
+    });
+  });
+};
+
+export const updateToast: UpdateToast = (id, { type, toasterProps, toastOptions, containerId }) => {
+  const options = getToastOptions({ type, toasterProps, toastOptions, containerId });
+
+  const toastComponent = getToastComponent({
+    type,
+    toasterProps,
+  });
+
+  return toast.update(id, {
+    ...options,
+    render: toastComponent,
+  });
+};
+
+export const dismissToast = toast.dismiss;
+export const isToastActive = toast.isActive;
+
+const userAction = {
+  success(options: UserActionOptions) {
+    return openToast({
+      type: ToasterType.UserAction,
+      toasterProps: { ...options, appearance: ToastUserAction.appearances.Success },
+    });
+  },
+
+  neutral(options: UserActionOptions) {
+    return openToast({
+      type: ToasterType.UserAction,
+      toasterProps: { ...options, appearance: ToastUserAction.appearances.Neutral },
+    });
+  },
+
+  error(options: UserActionOptions) {
+    return openToast({
+      type: ToasterType.UserAction,
+      toasterProps: { ...options, appearance: ToastUserAction.appearances.Error },
+    });
+  },
+
+  warning(options: UserActionOptions) {
+    return openToast({
+      type: ToasterType.UserAction,
+      toasterProps: { ...options, appearance: ToastUserAction.appearances.Warning },
+    });
+  },
+
+  update: {
+    success(id: ToasterId, options: UserActionOptions) {
+      updateToast(id, {
+        type: ToasterType.UserAction,
+        toasterProps: { ...options, appearance: ToastUserAction.appearances.Success },
+      });
+    },
+
+    neutral(id: ToasterId, options: UserActionOptions) {
+      updateToast(id, {
+        type: ToasterType.UserAction,
+        toasterProps: { ...options, appearance: ToastUserAction.appearances.Neutral },
+      });
+    },
+
+    warning(id: ToasterId, options: UserActionOptions) {
+      updateToast(id, {
+        type: ToasterType.UserAction,
+        toasterProps: { ...options, appearance: ToastUserAction.appearances.Warning },
+      });
+    },
+
+    error(id: ToasterId, options: UserActionOptions) {
+      updateToast(id, {
+        type: ToasterType.UserAction,
+        toasterProps: { ...options, appearance: ToastUserAction.appearances.Error },
+      });
+    },
+  },
+
+  dismiss(id?: ToasterId) {
+    return toast.dismiss(id);
+  },
+};
+
+const systemEvent = {
+  success(options: ToastSystemEventProps) {
+    return openToast({
+      type: ToasterType.SystemEvent,
+      toasterProps: { ...options, appearance: ToastSystemEvent.appearances.Success },
+    });
+  },
+
+  neutral(options: ToastSystemEventProps) {
+    return openToast({
+      type: ToasterType.SystemEvent,
+      toasterProps: { ...options, appearance: ToastSystemEvent.appearances.Neutral },
+    });
+  },
+
+  warning(options: ToastSystemEventProps) {
+    return openToast({
+      type: ToasterType.SystemEvent,
+      toasterProps: { ...options, appearance: ToastSystemEvent.appearances.Warning },
+    });
+  },
+
+  error(options: ToastSystemEventProps) {
+    return openToast({
+      type: ToasterType.SystemEvent,
+      toasterProps: { ...options, appearance: ToastSystemEvent.appearances.Error },
+    });
+  },
+
+  errorCritical(options: ToastSystemEventProps) {
+    return openToast({
+      type: ToasterType.SystemEvent,
+      toasterProps: { ...options, appearance: ToastSystemEvent.appearances.ErrorCritical },
+    });
+  },
+
+  update: {
+    success(id: ToasterId, options: ToastSystemEventProps) {
+      return updateToast(id, {
+        type: ToasterType.SystemEvent,
+        toasterProps: { ...options, appearance: ToastSystemEvent.appearances.Success },
+      });
+    },
+
+    neutral(id: ToasterId, options: ToastSystemEventProps) {
+      return updateToast(id, {
+        type: ToasterType.SystemEvent,
+        toasterProps: { ...options, appearance: ToastSystemEvent.appearances.Neutral },
+      });
+    },
+
+    warning(id: ToasterId, options: ToastSystemEventProps) {
+      return updateToast(id, {
+        type: ToasterType.SystemEvent,
+        toasterProps: { ...options, appearance: ToastSystemEvent.appearances.Warning },
+      });
+    },
+
+    error(id: ToasterId, options: ToastSystemEventProps) {
+      return updateToast(id, {
+        type: ToasterType.SystemEvent,
+        toasterProps: { ...options, appearance: ToastSystemEvent.appearances.Error },
+      });
+    },
+
+    errorCritical(id: ToasterId, options: ToastSystemEventProps) {
+      return updateToast(id, {
+        type: ToasterType.SystemEvent,
+        toasterProps: { ...options, appearance: ToastSystemEvent.appearances.ErrorCritical },
+      });
+    },
+  },
+
+  dismiss(id?: ToasterId) {
+    return toast.dismiss(id);
+  },
+};
+
+export const toaster: Toaster = {
+  userAction,
+  systemEvent,
+};

package/src/index.ts

@@ -0,0 +1,3 @@
+export { toaster } from './helpers';
+
+export type { ToastSystemEventProps, ToastUserActionProps } from './components';