react-strawberry-toast 1.0.0-alpha.1

package/src/components/toast-container.tsx

@@ -0,0 +1,153 @@
+'use client';
+
+import React from 'react';
+import { useSyncExternalStore } from 'react';
+import { Toast } from './toast';
+import { toastStore } from '../core/toast';
+import { getDirection } from '../utils/get-direction';
+import type { Position, NonHeadlessToastState as ToastState } from '../types';
+import { Condition, If, Else } from './condition';
+
+const OFFSET = 16;
+
+const positionStyle: Record<Position, React.CSSProperties> = {
+  'top-left': {
+    top: OFFSET,
+    left: OFFSET,
+  },
+  'top-center': {
+    top: OFFSET,
+    left: '50%',
+    transform: 'translateX(-50%)',
+  },
+  'top-right': {
+    top: OFFSET,
+    right: OFFSET,
+  },
+  'bottom-left': {
+    bottom: OFFSET,
+    left: OFFSET,
+  },
+  'bottom-center': {
+    bottom: OFFSET,
+    left: '50%',
+    transform: 'translateX(-50%)',
+  },
+  'bottom-right': {
+    bottom: OFFSET,
+    right: OFFSET,
+  },
+};
+
+interface ToastContainerProps {
+  position?: Position;
+  containerId?: string;
+  reverse?: boolean;
+  gap?: number;
+}
+
+export function ToastContainer({
+  position: globalPosition = 'top-center',
+  containerId = '',
+  gap = 9,
+  reverse = false,
+}: ToastContainerProps) {
+  const toastList = useSyncExternalStore(
+    toastStore.subscribe.bind(toastStore),
+    toastStore.getSnapShot.bind(toastStore),
+    toastStore.getSnapShot.bind(toastStore)
+  );
+
+  const toastsByPosition: Record<Position, Array<ToastState>> = toastList
+    .filter((toast) => toast.containerId === undefined)
+    .reduce((acc, toast) => {
+      const key = toast.position || globalPosition;
+      toast.position = key;
+      acc[key] = acc[key] || [];
+      acc[key].push(toast);
+      return acc;
+    }, {} as Record<Position, Array<ToastState>>);
+
+  return (
+    <Condition condition={!!containerId}>
+      <If>
+        <div
+          style={{
+            position: 'absolute',
+            zIndex: 9999,
+            pointerEvents: 'none',
+          }}
+        >
+          <div
+            style={{
+              pointerEvents: 'auto',
+              display: 'flex',
+              flexDirection: reverse ? 'column-reverse' : 'column',
+              gap,
+            }}
+          >
+            {toastList
+              .filter((toast) => toast.containerId === containerId)
+              .map((toast) => (
+                <Toast
+                  key={toast.toastId}
+                  toastProps={toast}
+                  style={{
+                    display: 'flex',
+                  }}
+                />
+              ))}
+          </div>
+        </div>
+      </If>
+      <Else>
+        <div
+          style={{
+            position: 'fixed',
+            zIndex: 9999,
+            top: OFFSET,
+            left: OFFSET,
+            right: OFFSET,
+            bottom: OFFSET,
+            pointerEvents: 'none',
+          }}
+        >
+          {Object.entries(toastsByPosition).map(([position, toasts]) => {
+            const style = positionStyle[position as Position];
+
+            const flexDirection = getDirection({
+              position: position as Position,
+              reverse,
+            });
+
+            return (
+              <div
+                key={position}
+                data-testid={position}
+                style={{
+                  pointerEvents: 'auto',
+                  position: 'fixed',
+                  display: 'flex',
+                  flexDirection,
+                  gap,
+                  ...style,
+                }}
+              >
+                {toasts.map((toast) => (
+                  <Toast
+                    key={toast.toastId}
+                    toastProps={toast}
+                    style={{
+                      display: 'flex',
+                      justifyContent: 'center',
+                    }}
+                  />
+                ))}
+              </div>
+            );
+          })}
+        </div>
+      </Else>
+    </Condition>
+  );
+}

package/src/components/toast-default.tsx

@@ -0,0 +1,96 @@
+import React, { type PropsWithChildren, type ReactNode } from 'react';
+import { STYLE_NAMESPACE } from '../constants';
+import type { ToastType } from '../types';
+
+function SuccessSvg() {
+  return (
+    <svg
+      stroke="none"
+      fill="none"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      height="22"
+      width="22"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path stroke="none" d="M0 0h24v24H0z"></path>
+      <path
+        d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
+        strokeWidth="0"
+        fill="#1ab173"
+      />
+    </svg>
+  );
+}
+
+function ErrorSvg() {
+  return (
+    <svg
+      stroke="none"
+      fill="#eb2639"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      height="22"
+      width="22"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M11.953 2C6.465 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.493 2 11.953 2zM13 17h-2v-2h2v2zm0-4h-2V7h2v6z"></path>
+    </svg>
+  );
+}
+
+function WarnSvg() {
+  return (
+    <svg
+      stroke="none"
+      fill="#fcba03"
+      strokeWidth="0"
+      viewBox="0 0 1024 1024"
+      height="22"
+      width="22"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M955.7 856l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zM480 416c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v184c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V416zm32 352a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"></path>
+    </svg>
+  );
+}
+
+export const ToastTypeIcons: Record<Exclude<ToastType, 'custom' | 'default'>, () => ReactNode> = {
+  success: SuccessSvg,
+  error: ErrorSvg,
+  loading: () => <div className={`${STYLE_NAMESPACE}__loading`} />,
+  warn: WarnSvg,
+};
+
+interface DefaultToastProps {
+  status: ToastType;
+}
+
+export function DefaultToast({ status, children }: DefaultToastProps & PropsWithChildren) {
+  const Icon = status === 'custom' || status === 'default' ? null : ToastTypeIcons[status];
+
+  return (
+    <div
+      style={{
+        boxSizing: 'border-box',
+        backgroundColor: 'white',
+        padding: '12px 14px 12px 12px',
+        display: 'flex',
+        alignItems: 'center',
+        gap: 5,
+        borderRadius: 8,
+        boxShadow: '2px 4px 10px rgba(0, 0, 0, 0.1)',
+      }}
+    >
+      {Icon && (
+        <span style={{ minWidth: 20, maxWidth: 20 }}>
+          <Icon />
+        </span>
+      )}
+
+      {children}
+    </div>
+  );
+}

package/src/components/toast.tsx

@@ -0,0 +1,84 @@
+import React, { useEffect } from 'react';
+import { Condition, If, Else } from './condition';
+import { getAnimation } from '../utils/get-animation';
+import { toast } from '../core/toast';
+import { DISAPPEAR_TIMEOUT, MAX_TIMEOUT } from '../constants';
+import { DefaultToast, ToastTypeIcons } from './toast-default';
+import type { NonHeadlessToastState as ToastState } from '../types';
+import '../styles/index.scss';
+
+interface ToasterProps {
+  toastProps: ToastState;
+  style: React.CSSProperties;
+}
+
+export function Toast({ toastProps, ...rest }: ToasterProps) {
+  const animationClassName = getAnimation({
+    isVisible: toastProps.isVisible,
+    position: toastProps.position!,
+  });
+
+  const content =
+    typeof toastProps.data === 'function'
+      ? toastProps.data({
+          close: () => toast.disappear(toastProps.toastId, 0),
+          immediatelyClose: () => {
+            toast.disappear(toastProps.toastId, 0);
+            toast.remove(toastProps.toastId, 0);
+          },
+          icons: {
+            success: <ToastTypeIcons.success />,
+            error: <ToastTypeIcons.error />,
+            warn: <ToastTypeIcons.warn />,
+            loading: <ToastTypeIcons.loading />,
+          },
+          isVisible: toastProps.isVisible,
+        })
+      : toastProps.data;
+
+  const onMouseEnter = () => {
+    if (toastProps.pauseOnHover) {
+      toast.pause(toastProps.toastId);
+    }
+  };
+
+  const onMouseLeave = () => {
+    if (toastProps.pauseOnHover) {
+      toast.resume(toastProps.toastId);
+    }
+  };
+
+  /** @description disappear after mount */
+  useEffect(() => {
+    if (!toast.isActive(toastProps.toastId)) {
+      toast.setActive(toastProps.toastId);
+      toast.disappear(toastProps.toastId, toastProps.timeOut);
+    }
+  }, [toastProps.toastId]);
+
+  /** @description promise toast */
+  useEffect(() => {
+    if (toastProps.updated !== undefined) {
+      const newTimeOut = toastProps.timeOut >= MAX_TIMEOUT ? DISAPPEAR_TIMEOUT : toastProps.timeOut;
+      toast.disappear(toastProps.toastId, newTimeOut);
+    }
+  }, [toastProps.updated]);
+
+  return (
+    <div
+      role="alert"
+      data-testid={`container-${toastProps.containerId}`}
+      className={toastProps.toastType === 'custom' ? '' : animationClassName}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      {...rest}
+    >
+      <Condition condition={toastProps.toastType !== 'custom'}>
+        <If>
+          <DefaultToast status={toastProps.toastType}>{content}</DefaultToast>
+        </If>
+        <Else>{content}</Else>
+      </Condition>
+    </div>
+  );
+}

package/src/constants/index.ts

@@ -0,0 +1,8 @@
+export const DISAPPEAR_TIMEOUT = 3_000;
+
+export const MAX_TIMEOUT = ~(1 << 31);
+
+/** @description time before the toast component is invisible and deleted from the list */
+export const REMOVE_TIMEOUT = 200;
+
+export const STYLE_NAMESPACE = 'react-strawberry-toast';

package/src/core/headless-toast.ts

@@ -0,0 +1,49 @@
+import { generateId } from '../utils/generate-id';
+import { ToastStore } from '../core/store';
+import { REMOVE_TIMEOUT, MAX_TIMEOUT, DISAPPEAR_TIMEOUT } from '../constants';
+import { toastHandlers } from './toast-handler';
+import type { BaseOptions, ToastState } from '../types';
+
+export const toastStore = new ToastStore<ToastState>();
+
+const idGenerator = generateId();
+
+const createToast =
+  () =>
+  (data: ToastState['data'], options: BaseOptions = {}): ToastState['toastId'] => {
+    const { timeOut = DISAPPEAR_TIMEOUT, removeTimeOut = REMOVE_TIMEOUT, toastId: optionToastId } = options;
+
+    const toastId = optionToastId || idGenerator();
+
+    if (toast.isActive(toastId)) {
+      throw new Error('A duplicate custom ID is not available.');
+    }
+
+    const createdAt = new Date().getTime();
+
+    const value: ToastState = {
+      ...options,
+      timeOut: timeOut > MAX_TIMEOUT ? MAX_TIMEOUT : timeOut,
+      toastId,
+      data,
+      createdAt,
+      removeTimeOut,
+      isVisible: true,
+    };
+
+    toastStore.state.push(value);
+    toastStore.setState([...toastStore.state]);
+
+    return toastId;
+  };
+
+export const toast = (data: ToastState['data'], options: BaseOptions = {}) => createToast()(data, options);
+
+const handlers = toastHandlers(toastStore);
+toast.setActive = handlers.setActive;
+toast.isActive = handlers.isActive;
+toast.disappear = handlers.disappear;
+toast.resume = handlers.resume;
+toast.pause = handlers.pause;
+toast.replace = handlers.replace;
+toast.remove = handlers.remove;

package/src/core/store.ts

@@ -0,0 +1,34 @@
+import { ToastState } from "../types";
+
+type Listener = () => void;
+
+export class ToastStore<T = ToastState> {
+  state: Array<T> = [];
+
+  listeners = new Set<Listener>();
+
+  /** @description list containing toast activated since mount */
+  activatedToasts = new Set<ToastState['toastId']>();
+
+  /** @description list with a timer for toast */
+  toastTimers = new Map<ToastState['toastId'], number>();
+
+  constructor() {}
+
+  subscribe(listener: Listener): Listener {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+
+  /** @description must put a new memory value in the nextState. */
+  setState(nextState: Array<T> | ((state: Array<T>) => Array<T>)): void {
+    this.state = typeof nextState === 'function' ? nextState(this.state) : nextState;
+    this.listeners.forEach((listener) => listener());
+  }
+
+  getSnapShot(): Array<T> {
+    return this.state;
+  }
+}

package/src/core/toast-handler.ts

@@ -0,0 +1,108 @@
+import { ToastStore } from './store';
+import { REMOVE_TIMEOUT, MAX_TIMEOUT, DISAPPEAR_TIMEOUT } from '../constants';
+import type { ToastState, Options, NonHeadlessToastState } from '../types';
+
+export const toastHandlers = <T = ToastState>(
+  toastStore: ToastStore<T extends ToastState ? ToastState : NonHeadlessToastState>
+) => {
+  const deleteTimer = (toastId: ToastState['toastId']) => {
+    const timerId = toastStore.toastTimers.get(toastId);
+    clearTimeout(timerId);
+
+    toastStore.toastTimers.delete(toastId);
+  };
+
+  const setActive = (toastId: ToastState['toastId']): void => {
+    toastStore.activatedToasts.add(toastId);
+  }
+  
+  const isActive = (toastId: ToastState['toastId']): boolean => toastStore.activatedToasts.has(toastId);
+
+  const remove = (toastId: ToastState['toastId'], timeOut = REMOVE_TIMEOUT) => {
+    if (!isActive(toastId)) {
+      return;
+    }
+
+    toastStore.activatedToasts.delete(toastId);
+
+    setTimeout(() => {
+      toastStore.state = toastStore.state.filter((toast) => toast.toastId !== toastId);
+      toastStore.setState([...toastStore.state]);
+    }, timeOut);
+
+    deleteTimer(toastId);
+  };
+
+  const replace = (
+    toastId: ToastState['toastId'],
+    data: ToastState['data'],
+    options?: Options & { toastType: NonHeadlessToastState['toastType'] }
+  ) => {
+    toastStore.state = toastStore.state.map((toast) => {
+      if (toast.toastId === toastId) {
+        return {
+          ...toast,
+          ...options,
+          updated: true,
+          data,
+        };
+      }
+      return toast;
+    });
+
+    toastStore.setState([...toastStore.state]);
+  };
+
+  const pause = (toastId: ToastState['toastId']): void => {
+    const pausedAt = new Date().getTime();
+
+    toastStore.state = toastStore.state.map((toast) => {
+      if (toast.toastId === toastId) {
+        return {
+          ...toast,
+          pausedAt,
+        };
+      }
+      return toast;
+    });
+
+    deleteTimer(toastId);
+    toastStore.setState([...toastStore.state]);
+  };
+
+  const disappear = (toastId: ToastState['toastId'], timeOut: number): void => {
+    const timer = setTimeout(
+      () => {
+        toastStore.state = toastStore.state.map((toast) => {
+          if (toast.toastId === toastId) {
+            return {
+              ...toast,
+              isVisible: false,
+            };
+          }
+          return toast;
+        });
+
+        toastStore.setState([...toastStore.state]);
+
+        const removeTimeOut = toastStore.state.find((toast) => toast.toastId === toastId)?.removeTimeOut;
+        remove(toastId, removeTimeOut);
+      },
+      timeOut > MAX_TIMEOUT ? MAX_TIMEOUT : timeOut
+    );
+
+    toastStore.toastTimers.set(toastId, timer);
+  };
+
+  const resume = (toastId: ToastState['toastId']): void => {
+    if (toastStore.toastTimers.has(toastId)) return;
+
+    const target = toastStore.state.find((toast) => toast.toastId === toastId);
+    if (!target) return;
+
+    const leftTimeout = target.createdAt + (target.timeOut || DISAPPEAR_TIMEOUT) - (target.pausedAt || 0);
+    disappear(toastId, leftTimeout);
+  };
+
+  return { setActive, isActive, disappear, resume, pause, replace, remove };
+};

package/src/core/toast.ts

@@ -0,0 +1,98 @@
+import { generateId } from '../utils/generate-id';
+import { ToastStore } from '../core/store';
+import { REMOVE_TIMEOUT, MAX_TIMEOUT, DISAPPEAR_TIMEOUT } from '../constants';
+import { toastHandlers } from './toast-handler';
+import type { ReactNode } from 'react';
+import type { NonHeadlessToastState, ToastState, Options, ToastType, ToastDataWithCallback } from '../types';
+
+export const toastStore = new ToastStore<NonHeadlessToastState>();
+
+const idGenerator = generateId();
+
+const createToast =
+  <T = ToastState['data']>(toastType: ToastType = 'default') =>
+  (
+    data: T extends ToastState['data'] ? ToastState['data'] : ToastDataWithCallback,
+    options: Options = {}
+  ): ToastState['toastId'] => {
+    const {
+      timeOut = DISAPPEAR_TIMEOUT,
+      removeTimeOut = REMOVE_TIMEOUT,
+      pauseOnHover = true,
+      toastId: optionToastId,
+    } = options;
+
+    const toastId = optionToastId || idGenerator();
+
+    if (toast.isActive(toastId)) {
+      throw new Error('A duplicate custom ID is not available.');
+    }
+
+    const createdAt = new Date().getTime();
+
+    const value: NonHeadlessToastState = {
+      ...options,
+      timeOut: timeOut > MAX_TIMEOUT ? MAX_TIMEOUT : timeOut,
+      toastId,
+      data,
+      createdAt,
+      toastType,
+      pauseOnHover,
+      removeTimeOut,
+      isVisible: true,
+    };
+
+    toastStore.state.push(value);
+    toastStore.setState([...toastStore.state]);
+
+    return toastId;
+  };
+
+export const toast = (data: ToastState['data'] | ToastDataWithCallback, options: Options = {}) =>
+  createToast<ToastState['data'] | ToastDataWithCallback>()(data, options);
+
+const handlers = toastHandlers<NonHeadlessToastState>(toastStore);
+toast.setActive = handlers.setActive;
+toast.isActive = handlers.isActive;
+toast.disappear = handlers.disappear;
+toast.resume = handlers.resume;
+toast.pause = handlers.pause;
+toast.replace = handlers.replace;
+toast.remove = handlers.remove;
+
+toast.success = createToast('success');
+toast.error = createToast('error');
+toast.warn = createToast('warn');
+toast.loading = createToast('loading');
+toast.custom = createToast<ToastState['data'] | ToastDataWithCallback>('custom');
+
+toast.promise = (
+  promise: Promise<any>,
+  promiseOption: {
+    loading: ReactNode;
+    success: ReactNode;
+    error: ReactNode;
+  },
+  options: Options = {}
+) => {
+  const { loading, success, error } = promiseOption;
+
+  const toastId = toast.loading(loading, {
+    ...options,
+    timeOut: MAX_TIMEOUT,
+  });
+
+  promise
+    .then(() => {
+      toast.replace(toastId, success, {
+        ...options,
+        toastType: 'success',
+      });
+    })
+    .catch(() => {
+      toast.replace(toastId, error, {
+        ...options,
+        toastType: 'error',
+      });
+    });
+};

package/src/global.d.ts

@@ -0,0 +1,6 @@
+declare global {
+  namespace Vi {
+    interface Assertion extends jest.Matchers<void> {}
+    interface AsymmetricMatchers extends jest.Matchers<void> {}
+  }
+}

package/src/headless.ts

@@ -0,0 +1,3 @@
+export * from './hooks/use-toasts';
+export { toast } from './core/headless-toast';
+export type { ToastState, BaseOptions } from './types';

package/src/hooks/use-toasts.ts

@@ -0,0 +1,11 @@
+import { useSyncExternalStore } from 'react';
+import { toastStore } from '../core/headless-toast';
+import type { ToastState } from '../types';
+
+export const useToasts = (): Array<ToastState> => {
+  return useSyncExternalStore(
+    toastStore.subscribe.bind(toastStore),
+    toastStore.getSnapShot.bind(toastStore),
+    toastStore.getSnapShot.bind(toastStore)
+  );
+};

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './core/toast';
+export * from './components/toast-container';
+export * from './types';