react-strawberry-toast 1.0.0-alpha.1

package/src/styles/index.scss

@@ -0,0 +1,86 @@
+$react-strawberry-toast-namespace: 'react-strawberry-toast';
+
+@keyframes l3 {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+@keyframes react-strawberry-toast_fade-in {
+  from {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes react-strawberry-toast_fade-out {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+
+  to {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+}
+
+@keyframes react-strawberry-toast_fade-in-reverse {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes react-strawberry-toast_fade-out-reverse {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+
+  to {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+}
+
+.#{$react-strawberry-toast-namespace}__fade-in {
+  animation: react-strawberry-toast_fade-in 0.3s ease-out;
+}
+
+.#{$react-strawberry-toast-namespace}__fade-out {
+  animation: react-strawberry-toast_fade-out 0.3s ease-out;
+}
+
+.#{$react-strawberry-toast-namespace}__fade-in-reverse {
+  animation: react-strawberry-toast_fade-in-reverse 0.3s ease-out;
+}
+
+.#{$react-strawberry-toast-namespace}__fade-out-reverse {
+  animation: react-strawberry-toast_fade-out-reverse 0.3s ease-out;
+}
+
+.#{$react-strawberry-toast-namespace}__loading {
+  width: 15px;
+  padding: 3px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: #6b6875;
+  --_m: conic-gradient(#0000 10%, #000),
+    linear-gradient(#000 0 0) content-box;
+  -webkit-mask: var(--_m);
+  mask: var(--_m);
+  -webkit-mask-composite: source-out;
+  mask-composite: subtract;
+  animation: l3 1s infinite linear;
+}

package/src/types/index.ts

@@ -0,0 +1,48 @@
+import type { ReactNode } from 'react';
+import type { RequiredExcept } from './utils';
+
+export type Position =
+  | 'bottom-left'
+  | 'bottom-center'
+  | 'bottom-right'
+  | 'top-left'
+  | 'top-center'
+  | 'top-right';
+
+export type ToastType = 'default' | 'custom' | 'success' | 'error' | 'loading' | 'warn';
+
+export interface BaseOptions {
+  toastId?: string;
+  timeOut?: number;
+  removeTimeOut?: number;
+}
+export interface ToastBaseState {
+  toastId: string;
+  data: ReactNode;
+  isVisible: boolean;
+  createdAt: number;
+  pausedAt?: number;
+  updated?: boolean;
+}
+
+export interface Options extends BaseOptions {
+  position?: Position;
+  containerId?: string;
+  pauseOnHover?: boolean;
+  toastType?: ToastType;
+}
+interface ToastDataCallback {
+  close: () => void;
+  immediatelyClose: () => void;
+  isVisible: boolean;
+  icons: Record<Exclude<ToastType, 'default' | 'custom'>, ReactNode>;
+}
+
+export type ToastState = ToastBaseState & BaseOptions;
+
+export type ToastDataWithCallback = (props: ToastDataCallback) => ReactNode;
+
+export type NonHeadlessToastState = RequiredExcept<Options, 'containerId' | 'position'> &
+  Omit<ToastState, 'data'> & {
+    data: ToastDataWithCallback | ReactNode;
+  };

package/src/types/utils.ts

@@ -0,0 +1 @@
+export type RequiredExcept<T, K extends keyof T> = Required<Omit<T, K>> & Pick<T, K>;

package/src/utils/generate-id.ts

@@ -0,0 +1,4 @@
+export const generateId = () => {
+  let id = 0;
+  return () => String(id++);
+};

package/src/utils/get-animation.ts

@@ -0,0 +1,10 @@
+import { STYLE_NAMESPACE } from '../constants';
+import { Position } from '../types';
+
+export const getAnimation = ({ isVisible, position }: { isVisible: boolean; position: Position }) => {
+  if (isVisible) {
+    return /top/i.test(position) ? `${STYLE_NAMESPACE}__fade-in` : `${STYLE_NAMESPACE}__fade-in-reverse`;
+  }
+
+  return /bottom/i.test(position) ? `${STYLE_NAMESPACE}__fade-out-reverse` : `${STYLE_NAMESPACE}__fade-out`;
+};

package/src/utils/get-direction.ts

@@ -0,0 +1,19 @@
+import { Position } from '../types';
+
+export const getDirection = ({
+  position,
+  reverse = false,
+}: {
+  position: Position;
+  reverse: boolean;
+}): 'column-reverse' | 'column' => {
+  if (/top/i.test(position)) {
+    return reverse ? 'column-reverse': 'column';
+  }
+
+  if (/bottom/i.test(position)) {
+    return reverse ? 'column': 'column-reverse';
+  }
+
+  return 'column';
+};

package/src/vite.env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite-plugin-svgr/client" />