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

package/dist/helpers.js

@@ -0,0 +1,199 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// eslint-disable-next-line react/no-deprecated
+import { render } from 'react-dom';
+import { toast } from 'react-toastify';
+import { ToasterContainer, ToastSystemEvent, ToastUserAction, } from './components';
+import { AUTO_CLOSE_TIME, TOASTER_CONTAINER_DEFAULT_PROPS, TOASTER_CONTAINER_PREFIX, TOASTER_ROOT_ID, } from './constants';
+import { ToasterType, } from './types';
+function getToasterContainer({ type, toasterParent, containerProps, }) {
+    const containerId = (containerProps === null || containerProps === void 0 ? void 0 : containerProps.containerId) || `${TOASTER_CONTAINER_PREFIX}${type}`;
+    const toasterContainerProps = Object.assign(Object.assign(Object.assign({}, 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({ type, toastOptions, containerId, }) {
+    return {
+        toastId: toastOptions === null || toastOptions === void 0 ? void 0 : toastOptions.id,
+        autoClose: AUTO_CLOSE_TIME[type],
+        containerId: containerId || `${TOASTER_CONTAINER_PREFIX}${type}`,
+    };
+}
+function getToastComponent({ type, toasterProps, }) {
+    switch (type) {
+        case ToasterType.UserAction:
+            return _jsx(ToastUserAction, Object.assign({}, toasterProps));
+        case ToasterType.SystemEvent:
+            return _jsx(ToastSystemEvent, Object.assign({}, toasterProps));
+        default:
+            return undefined;
+    }
+}
+export const 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(_jsx(ToasterContainer, Object.assign({}, toasterContainerProps)), toasterContainer, () => {
+            setTimeout(() => {
+                resolve(toast(toasterComponent, options));
+            }, 0);
+        });
+    });
+};
+export const updateToast = (id, { type, toasterProps, toastOptions, containerId }) => {
+    const options = getToastOptions({ type, toasterProps, toastOptions, containerId });
+    const toastComponent = getToastComponent({
+        type,
+        toasterProps,
+    });
+    return toast.update(id, Object.assign(Object.assign({}, options), { render: toastComponent }));
+};
+export const dismissToast = toast.dismiss;
+export const isToastActive = toast.isActive;
+const userAction = {
+    success(options) {
+        return openToast({
+            type: ToasterType.UserAction,
+            toasterProps: Object.assign(Object.assign({}, options), { appearance: ToastUserAction.appearances.Success }),
+        });
+    },
+    neutral(options) {
+        return openToast({
+            type: ToasterType.UserAction,
+            toasterProps: Object.assign(Object.assign({}, options), { appearance: ToastUserAction.appearances.Neutral }),
+        });
+    },
+    error(options) {
+        return openToast({
+            type: ToasterType.UserAction,
+            toasterProps: Object.assign(Object.assign({}, options), { appearance: ToastUserAction.appearances.Error }),
+        });
+    },
+    warning(options) {
+        return openToast({
+            type: ToasterType.UserAction,
+            toasterProps: Object.assign(Object.assign({}, options), { appearance: ToastUserAction.appearances.Warning }),
+        });
+    },
+    update: {
+        success(id, options) {
+            updateToast(id, {
+                type: ToasterType.UserAction,
+                toasterProps: Object.assign(Object.assign({}, options), { appearance: ToastUserAction.appearances.Success }),
+            });
+        },
+        neutral(id, options) {
+            updateToast(id, {
+                type: ToasterType.UserAction,
+                toasterProps: Object.assign(Object.assign({}, options), { appearance: ToastUserAction.appearances.Neutral }),
+            });
+        },
+        warning(id, options) {
+            updateToast(id, {
+                type: ToasterType.UserAction,
+                toasterProps: Object.assign(Object.assign({}, options), { appearance: ToastUserAction.appearances.Warning }),
+            });
+        },
+        error(id, options) {
+            updateToast(id, {
+                type: ToasterType.UserAction,
+                toasterProps: Object.assign(Object.assign({}, options), { appearance: ToastUserAction.appearances.Error }),
+            });
+        },
+    },
+    dismiss(id) {
+        return toast.dismiss(id);
+    },
+};
+const systemEvent = {
+    success(options) {
+        return openToast({
+            type: ToasterType.SystemEvent,
+            toasterProps: Object.assign(Object.assign({}, options), { appearance: ToastSystemEvent.appearances.Success }),
+        });
+    },
+    neutral(options) {
+        return openToast({
+            type: ToasterType.SystemEvent,
+            toasterProps: Object.assign(Object.assign({}, options), { appearance: ToastSystemEvent.appearances.Neutral }),
+        });
+    },
+    warning(options) {
+        return openToast({
+            type: ToasterType.SystemEvent,
+            toasterProps: Object.assign(Object.assign({}, options), { appearance: ToastSystemEvent.appearances.Warning }),
+        });
+    },
+    error(options) {
+        return openToast({
+            type: ToasterType.SystemEvent,
+            toasterProps: Object.assign(Object.assign({}, options), { appearance: ToastSystemEvent.appearances.Error }),
+        });
+    },
+    errorCritical(options) {
+        return openToast({
+            type: ToasterType.SystemEvent,
+            toasterProps: Object.assign(Object.assign({}, options), { appearance: ToastSystemEvent.appearances.ErrorCritical }),
+        });
+    },
+    update: {
+        success(id, options) {
+            return updateToast(id, {
+                type: ToasterType.SystemEvent,
+                toasterProps: Object.assign(Object.assign({}, options), { appearance: ToastSystemEvent.appearances.Success }),
+            });
+        },
+        neutral(id, options) {
+            return updateToast(id, {
+                type: ToasterType.SystemEvent,
+                toasterProps: Object.assign(Object.assign({}, options), { appearance: ToastSystemEvent.appearances.Neutral }),
+            });
+        },
+        warning(id, options) {
+            return updateToast(id, {
+                type: ToasterType.SystemEvent,
+                toasterProps: Object.assign(Object.assign({}, options), { appearance: ToastSystemEvent.appearances.Warning }),
+            });
+        },
+        error(id, options) {
+            return updateToast(id, {
+                type: ToasterType.SystemEvent,
+                toasterProps: Object.assign(Object.assign({}, options), { appearance: ToastSystemEvent.appearances.Error }),
+            });
+        },
+        errorCritical(id, options) {
+            return updateToast(id, {
+                type: ToasterType.SystemEvent,
+                toasterProps: Object.assign(Object.assign({}, options), { appearance: ToastSystemEvent.appearances.ErrorCritical }),
+            });
+        },
+    },
+    dismiss(id) {
+        return toast.dismiss(id);
+    },
+};
+export const toaster = {
+    userAction,
+    systemEvent,
+};

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1 @@
+export { toaster } from './helpers';

package/dist/testIds.d.ts

@@ -0,0 +1,16 @@
+export declare const TOAST_SYSTEM_EVENT_TEST_IDS: {
+    icon: string;
+    main: string;
+    title: string;
+    description: string;
+    buttonClose: string;
+    link: string;
+    progressbar: string;
+    buttonCloseColumn: string;
+};
+export declare const TOAST_USER_ACTION_TEST_IDS: {
+    main: string;
+    label: string;
+    icon: string;
+    link: string;
+};

package/dist/testIds.js

@@ -0,0 +1,18 @@
+const TOAST_SYSTEM_EVENT_TEST_ID = 'toast-system-event';
+export const TOAST_SYSTEM_EVENT_TEST_IDS = {
+    icon: `${TOAST_SYSTEM_EVENT_TEST_ID}__icon`,
+    main: TOAST_SYSTEM_EVENT_TEST_ID,
+    title: `${TOAST_SYSTEM_EVENT_TEST_ID}__title`,
+    description: `${TOAST_SYSTEM_EVENT_TEST_ID}__description`,
+    buttonClose: `${TOAST_SYSTEM_EVENT_TEST_ID}__button-close`,
+    link: `${TOAST_SYSTEM_EVENT_TEST_ID}__link`,
+    progressbar: `${TOAST_SYSTEM_EVENT_TEST_ID}__progressbar`,
+    buttonCloseColumn: `${TOAST_SYSTEM_EVENT_TEST_ID}button-close-column`,
+};
+const TOAST_USER_ACTION_TEST_ID = 'toast-user-action';
+export const TOAST_USER_ACTION_TEST_IDS = {
+    main: TOAST_USER_ACTION_TEST_ID,
+    label: `${TOAST_USER_ACTION_TEST_ID}__label`,
+    icon: `${TOAST_USER_ACTION_TEST_ID}__icon`,
+    link: `${TOAST_USER_ACTION_TEST_ID}__link`,
+};

package/dist/types.d.ts

@@ -0,0 +1,67 @@
+import { Id, ToastOptions as RtToastOptions } from 'react-toastify';
+import { ToasterContainerProps, ToastSystemEventProps, ToastUserActionProps } from './components';
+export type ToasterId = Id;
+export type PromisedId = Promise<ToasterId>;
+export type ToastOptions = {
+    id?: ToasterId;
+    autoClose?: RtToastOptions['autoClose'];
+    onClose?: RtToastOptions['onClose'];
+};
+export declare enum ToasterType {
+    SystemEvent = "system-event",
+    UserAction = "user-action"
+}
+export type ToasterPropsMap = {
+    [ToasterType.UserAction]: ToastUserActionProps;
+    [ToasterType.SystemEvent]: ToastSystemEventProps;
+};
+type OpenNotificationProps<T extends keyof ToasterPropsMap> = {
+    type: T;
+    toasterProps?: ToasterPropsMap[T];
+    containerProps?: ToasterContainerProps;
+    toastOptions?: ToastOptions;
+    toasterParent?: HTMLDivElement;
+};
+type DefaultToasterProps<T extends keyof ToasterPropsMap> = {
+    toasterProps: ToasterPropsMap[T];
+};
+export type OpenToast = <T extends keyof ToasterPropsMap>(props: DefaultToasterProps<T> & OpenNotificationProps<T>) => PromisedId;
+export type UpdateToast = <T extends keyof ToasterPropsMap>(id: string | number, props: {
+    type: T;
+    toasterProps: ToasterPropsMap[T];
+    toastOptions?: ToastOptions;
+    containerId?: ToasterContainerProps['containerId'];
+}) => void;
+export type UserActionOptions = Omit<ToastUserActionProps, 'appearance'> & Pick<ToastOptions, 'id'>;
+export type SystemEventOptions = Omit<ToastSystemEventProps, 'appearance'> & Pick<ToastOptions, 'id'>;
+export type Toaster = {
+    userAction: {
+        success(options: UserActionOptions): PromisedId;
+        neutral(options: UserActionOptions): PromisedId;
+        warning(options: UserActionOptions): PromisedId;
+        error(options: UserActionOptions): PromisedId;
+        update: {
+            success(id: ToasterId, options: UserActionOptions): void;
+            neutral(id: ToasterId, options: UserActionOptions): void;
+            warning(id: ToasterId, options: UserActionOptions): void;
+            error(id: ToasterId, options: UserActionOptions): void;
+        };
+        dismiss(id?: ToasterId): void;
+    };
+    systemEvent: {
+        success(options: SystemEventOptions): PromisedId;
+        neutral(options: SystemEventOptions): PromisedId;
+        warning(options: SystemEventOptions): PromisedId;
+        error(options: SystemEventOptions): PromisedId;
+        errorCritical(options: SystemEventOptions): PromisedId;
+        update: {
+            success(id: ToasterId, options: SystemEventOptions): void;
+            neutral(id: ToasterId, options: SystemEventOptions): void;
+            warning(id: ToasterId, options: SystemEventOptions): void;
+            error(id: ToasterId, options: SystemEventOptions): void;
+            errorCritical(id: ToasterId, options: SystemEventOptions): void;
+        };
+        dismiss(id?: ToasterId): void;
+    };
+};
+export {};

package/dist/types.js

@@ -0,0 +1,5 @@
+export var ToasterType;
+(function (ToasterType) {
+    ToasterType["SystemEvent"] = "system-event";
+    ToasterType["UserAction"] = "user-action";
+})(ToasterType || (ToasterType = {}));

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@snack-uikit/toaster",
+  "publishConfig": {
+    "access": "public"
+  },
+  "title": "Toaster",
+  "version": "0.3.21-preview-85c5f47b.0",
+  "sideEffects": [
+    "*.css",
+    "*.woff",
+    "*.woff2"
+  ],
+  "description": "",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "homepage": "https://github.com/cloud-ru-tech/snack-uikit/tree/master/packages/toaster",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cloud-ru-tech/snack-uikit.git",
+    "directory": "packages/toaster"
+  },
+  "author": "Nikita Ershov <niershov@cloud.ru>",
+  "contributors": [
+    "Nikita Ershov <niershov@cloud.ru>"
+  ],
+  "files": [
+    "dist",
+    "src",
+    "./CHANGELOG.md",
+    "./LICENSE"
+  ],
+  "license": "Apache-2.0",
+  "scripts": {},
+  "dependencies": {
+    "@snack-uikit/icons": "0.18.2-preview-85c5f47b.0",
+    "@snack-uikit/link": "0.7.1-preview-85c5f47b.0",
+    "@snack-uikit/truncate-string": "0.2.17-preview-85c5f47b.0",
+    "@snack-uikit/utils": "2.0.2-preview-85c5f47b.0",
+    "classnames": "2.3.2",
+    "react-toastify": "9.1.3"
+  },
+  "gitHead": "6a7eef41d780d945f64f791448eaa72b9e0ae72d"
+}

package/src/components/ToastSystemEvent/ToastSystemEvent.tsx

@@ -0,0 +1,119 @@
+import cn from 'classnames';
+import { MouseEvent, useMemo } from 'react';
+import { ToastContentProps as RtToastContentProps } from 'react-toastify';
+
+import { CrossSVG } from '@snack-uikit/icons';
+import { Link } from '@snack-uikit/link';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { AUTO_CLOSE_TIME } from '../../constants';
+import { TOAST_SYSTEM_EVENT_TEST_IDS } from '../../testIds';
+import { ToasterType } from '../../types';
+import { APPEARANCE_TO_ON_COLOR_MAP, ToastSystemEventAppearance } from './constants';
+import styles from './styles.module.scss';
+import { getIcon } from './utils';
+
+export type ToastSystemEventLink = {
+  text: string;
+  href: string;
+  onClick?(e: MouseEvent<HTMLAnchorElement>): void;
+};
+
+export type ToastSystemEventProps = Partial<RtToastContentProps> &
+  WithSupportProps<{
+    title: string;
+    description?: string;
+    appearance?: ToastSystemEventAppearance;
+    link?: ToastSystemEventLink;
+    progressBar?: boolean;
+    closable?: boolean;
+    className?: string;
+    onCloseClick?(e: MouseEvent<HTMLButtonElement>, close?: () => void): void;
+  }>;
+
+export function ToastSystemEvent({
+  appearance = ToastSystemEventAppearance.Neutral,
+  onCloseClick,
+  progressBar = true,
+  closable = true,
+  title,
+  description,
+  link,
+  closeToast,
+  className,
+  ...rest
+}: ToastSystemEventProps) {
+  const handleCloseClick = (e: MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    onCloseClick ? onCloseClick(e, closeToast) : closeToast?.();
+  };
+
+  const icon = useMemo(() => getIcon(appearance), [appearance]);
+
+  return (
+    <div className={cn(styles.container, className)} {...extractSupportProps(rest)} data-appearance={appearance}>
+      <div className={styles.icon}>{icon}</div>
+
+      <div className={styles.content}>
+        <div>
+          <span className={styles.title}>
+            <TruncateString text={title} maxLines={1} hideTooltip data-test-id={TOAST_SYSTEM_EVENT_TEST_IDS.title} />
+          </span>
+
+          {description && (
+            <span className={styles.description}>
+              <TruncateString
+                maxLines={4}
+                text={description}
+                hideTooltip
+                data-test-id={TOAST_SYSTEM_EVENT_TEST_IDS.description}
+              />
+            </span>
+          )}
+        </div>
+
+        {link && (
+          <Link
+            text={link.text}
+            href={link.href}
+            size={Link.sizes.M}
+            onClick={link.onClick}
+            onColor={APPEARANCE_TO_ON_COLOR_MAP[appearance]}
+            data-test-id={TOAST_SYSTEM_EVENT_TEST_IDS.link}
+            onSurface={
+              appearance === ToastSystemEventAppearance.ErrorCritical
+                ? Link.onSurfaces.Accent
+                : Link.onSurfaces.Background
+            }
+          />
+        )}
+      </div>
+
+      {closable && (
+        <button
+          className={styles.buttonClose}
+          onClick={handleCloseClick}
+          data-test-id={TOAST_SYSTEM_EVENT_TEST_IDS.buttonClose}
+          // TODO add translations
+          aria-label='close notification'
+        >
+          <CrossSVG />
+        </button>
+      )}
+
+      {progressBar && (
+        <div
+          role='progressbar'
+          // TODO add translations
+          aria-label='progressbar'
+          data-test-id={TOAST_SYSTEM_EVENT_TEST_IDS.progressbar}
+          className={styles.progress}
+          style={{ animationDuration: `${AUTO_CLOSE_TIME[ToasterType.SystemEvent]}ms` }}
+        />
+      )}
+    </div>
+  );
+}
+
+ToastSystemEvent.appearances = ToastSystemEventAppearance;

package/src/components/ToastSystemEvent/constants.ts

@@ -0,0 +1,17 @@
+import { OnColor } from '@snack-uikit/link';
+
+export enum ToastSystemEventAppearance {
+  Neutral = 'neutral',
+  Error = 'error',
+  ErrorCritical = 'errorCritical',
+  Warning = 'warning',
+  Success = 'success',
+}
+
+export const APPEARANCE_TO_ON_COLOR_MAP = {
+  [ToastSystemEventAppearance.Neutral]: OnColor.InvertNeutral,
+  [ToastSystemEventAppearance.Error]: OnColor.InvertNeutral,
+  [ToastSystemEventAppearance.ErrorCritical]: OnColor.Red,
+  [ToastSystemEventAppearance.Warning]: OnColor.InvertNeutral,
+  [ToastSystemEventAppearance.Success]: OnColor.InvertNeutral,
+} as const;

package/src/components/ToastSystemEvent/index.ts

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

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

@@ -0,0 +1,194 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toaster-toasterSystemEvent';
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+@import '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
+
+@mixin colorMap($background-color, $icon-color, $title-color, $description-color, $progress-color) {
+  background-color: $background-color;
+
+  .icon {
+    color: $icon-color;
+  }
+
+  .title {
+    color: $title-color;
+  }
+
+  .description {
+    color: $description-color;
+  }
+
+  .progress {
+    background-color: $progress-color;
+  }
+}
+
+.icon {
+  svg {
+    width: $icon-s !important; /* stylelint-disable-line declaration-no-important */
+    height: $icon-s !important; /* stylelint-disable-line declaration-no-important */
+  }
+}
+
+.buttonClose {
+  @include composite-var($toaster-system-event-toast-button-close);
+
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+
+  color: $sys-invert-neutral-text-light;
+
+  background-color: transparent;
+  border: none;
+
+  svg {
+    width: $icon-s !important; /* stylelint-disable-line declaration-no-important */
+    height: $icon-s !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  &:hover {
+    color: $sys-invert-neutral-text-main;
+  }
+
+  &:focus,
+  &:active {
+    color: $sys-invert-neutral-accent-pressed;
+  }
+
+  &:focus-visible {
+    @include outline-var($container-focused-s);
+
+    color: $sys-invert-neutral-text-main;
+    outline-color: $sys-available-on-complementary;
+    outline-offset: $spacing-state-focus-offset;
+  }
+}
+
+.content {
+  @include composite-var($toaster-system-event-toast-content);
+
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  word-break: break-word;
+}
+
+.title {
+  @include composite-var($sans-title-s);
+
+  display: grid;
+}
+
+.description {
+  @include composite-var($sans-body-m);
+}
+
+@keyframes progressBarAnimation {
+  0% {
+    width: 100%;
+  }
+  100% {
+    width: 0;
+  }
+}
+
+.progress {
+  @include composite-var($toaster-system-event-toast-progress-bar);
+
+  position: absolute;
+  bottom: 0;
+  left: 0;
+
+  width: 0;
+
+  animation: progressBarAnimation linear 1 forwards;
+  animation-play-state: active;
+}
+
+.container {
+  @include composite-var($toaster-system-event-toast-container);
+
+  cursor: default;
+
+  position: relative;
+
+  overflow: hidden;
+  display: flex;
+
+  box-sizing: border-box;
+
+  &:hover .progress {
+    animation-play-state: paused;
+  }
+
+
+  &[data-appearance='neutral'] {
+    @include colorMap(
+      $sys-invert-neutral-background, 
+      $sys-invert-neutral-accent-default, 
+      $sys-invert-neutral-text-main, 
+      $sys-invert-neutral-text-support, 
+      $sys-neutral-accent-default
+    );
+  }
+
+  &[data-appearance='error'] {
+    @include colorMap(
+      $sys-invert-neutral-background, 
+      $sys-red-accent-default, 
+      $sys-invert-neutral-text-main, 
+      $sys-invert-neutral-text-support,
+      $sys-red-accent-default
+    );
+  }
+
+  &[data-appearance='errorCritical'] {
+    @include colorMap(
+      $sys-red-accent-default, 
+      $sys-red-on-accent, 
+      $sys-red-on-accent, 
+      $sys-red-on-accent,
+      $sys-red-decor-activated
+    );
+    
+    .buttonClose {
+      color: $sys-red-on-accent;
+      opacity: $opacity-a064;
+
+      &:hover,
+      &:focus-visible {
+        opacity: 1;
+      }
+
+      &:active {
+        opacity: $opacity-a048;
+      }
+    }
+  }
+
+  &[data-appearance='warning'] {
+    @include colorMap(
+      $sys-invert-neutral-background, 
+      $sys-yellow-accent-default, 
+      $sys-invert-neutral-text-main, 
+      $sys-invert-neutral-text-support,
+      $sys-yellow-accent-default
+    );
+  }
+
+  &[data-appearance='success'] {
+    @include colorMap(
+      $sys-invert-neutral-background, 
+      $sys-green-accent-default, 
+      $sys-invert-neutral-text-main, 
+      $sys-invert-neutral-text-support,
+      $sys-green-accent-default
+    );
+  }
+}