Sonner

1'use client';
2 
3import React, { memo, useEffect, useState } from 'react';
4import {
5  type ExternalToast,
6  Toaster as Sonner,
7  type ToastT,
8  type ToasterProps,
9  toast as sonnerToast,
10} from 'sonner';
11 
12import { Button } from '@/components/ui/button';
13import { Icon } from '@/components/ui/icon';
14import { IconShell } from '@/components/ui/icon-shell';
15import { cn } from '@/lib/utils';
16 
17type ToastType = NonNullable<ToastT['type']>;
18 
19export interface ToastOptions extends Omit<ExternalToast, 'action' | 'cancel'> {
20  readonly action?: React.ReactNode;
21  readonly cancel?: React.ReactNode;
22  readonly testId?: string;
23}
24 
25interface ToastProps {
26  readonly id: string | number;
27  readonly message: string;
28  readonly type: ToastType;
29  readonly options?: ToastOptions;
30}
31 
32const toastTypeConfig = {
33  success: {
34    borderClass: 'border-l-stroke-status-success',
35    iconClass: 'text-status-success',
36    iconName: 'check_circle',
37  },
38  error: {
39    borderClass: 'border-l-stroke-status-error',
40    iconClass: 'text-status-error',
41    iconName: 'cancel',
42  },
43  warning: {
44    borderClass: 'border-l-stroke-status-warning',
45    iconClass: 'text-status-warning',
46    iconName: 'error',
47  },
48  info: {
49    borderClass: 'border-l-stroke-status-focus',
50    iconClass: 'text-status-information',
51    iconName: 'info',
52  },
53  default: {
54    borderClass: 'border-l-stroke-primary',
55    iconClass: 'text-fg-secondary',
56    iconName: 'playlist_add_check',
57  },
58} as const;
59 
60type ToastConfigKey = keyof typeof toastTypeConfig;
61 
62const getToastConfig = (type: ToastType) => {
63  if (type in toastTypeConfig) {
64    return toastTypeConfig[type as ToastConfigKey];
65  }
66 
67  return toastTypeConfig.info;
68};
69 
70const getDefaultIcon = (config: ReturnType<typeof getToastConfig>) => (
71  <IconShell type="custom" className={config.iconClass}>
72    <Icon icon={config.iconName} />
73  </IconShell>
74);
75 
76function getCancelComponent(
77  cancel: ToastOptions['cancel'],
78  id: string | number,
79): React.ReactNode {
80  if (cancel === null) {
81    return null;
82  }
83 
84  if (cancel !== undefined) {
85    return cancel;
86  }
87 
88  return (
89    <Button
90      variant="ghost"
91      size="icon-xxs"
92      onClick={() => sonnerToast.dismiss(id)}
93      aria-label="Close toast">
94      <IconShell type="neutral" hoverable size="sm">
95        <Icon icon="close" />
96      </IconShell>
97    </Button>
98  );
99}
100 
101const Toast = memo(function Toast({ id, message, type, options }: ToastProps) {
102  const { action, cancel, className, icon, testId } = options || {};
103 
104// … truncated