Add comprehensive frontend UI and distributed infrastructure

Frontend Enhancements:
- Complete React TypeScript frontend with modern UI components
- Distributed workflows management interface with real-time updates
- Socket.IO integration for live agent status monitoring
- Agent management dashboard with cluster visualization
- Project management interface with metrics and task tracking
- Responsive design with proper error handling and loading states

Backend Infrastructure:
- Distributed coordinator for multi-agent workflow orchestration
- Cluster management API with comprehensive agent operations
- Enhanced database models for agents and projects
- Project service for filesystem-based project discovery
- Performance monitoring and metrics collection
- Comprehensive API documentation and error handling

Documentation:
- Complete distributed development guide (README_DISTRIBUTED.md)
- Comprehensive development report with architecture insights
- System configuration templates and deployment guides

The platform now provides a complete web interface for managing the distributed AI cluster
with real-time monitoring, workflow orchestration, and agent coordination capabilities.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
anthonyrawlins
2025-07-10 08:41:59 +10:00
parent fc0eec91ef
commit 85bf1341f3
28348 changed files with 2646896 additions and 69 deletions

21
frontend/node_modules/react-hot-toast/LICENSE generated vendored Normal file
View File

@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2020 Timo Lins
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

72
frontend/node_modules/react-hot-toast/README.md generated vendored Normal file
View File

@@ -0,0 +1,72 @@
<a href="https://react-hot-toast.com/"><img alt="react-hot-toast - Try it out" src="https://github.com/timolins/react-hot-toast/raw/main/assets/header.svg"/></a>
<div align="center">
<img src="https://badgen.net/npm/v/react-hot-toast" alt="NPM Version" />
<img src="https://badgen.net/bundlephobia/minzip/react-hot-toast" alt="minzipped size"/>
<img src="https://github.com/timolins/react-hot-toast/workflows/CI/badge.svg" alt="Build Status" />
</a>
</div>
<br />
<div align="center"><strong>Smoking hot Notifications for React.</strong></div>
<div align="center"> Lightweight, customizable and beautiful by default.</div>
<br />
<div align="center">
<a href="https://react-hot-toast.com/">Website</a>
<span> · </span>
<a href="https://react-hot-toast.com/docs">Documentation</a>
<span> · </span>
<a href="https://twitter.com/timolins">Twitter</a>
</div>
<br />
<div align="center">
<sub>Cooked by <a href="https://twitter.com/timolins">Timo Lins</a> 👨‍🍳</sub>
</div>
<br />
## Features
- 🔥 **Hot by default**
- 🔩 **Easily Customizable**
-**Promise API** - _Automatic loader from a promise_
- 🕊 **Lightweight** - _less than 5kb including styles_
-**Accessible**
- 🤯 **Headless Hooks** - _Create your own with [`useToaster()`](https://react-hot-toast.com/docs/use-toaster)_
## Installation
#### With pnpm
```sh
pnpm add react-hot-toast
```
#### With NPM
```sh
npm install react-hot-toast
```
## Getting Started
Add the Toaster to your app first. It will take care of rendering all notifications emitted. Now you can trigger `toast()` from anywhere!
```jsx
import toast, { Toaster } from 'react-hot-toast';
const notify = () => toast('Here is your toast.');
const App = () => {
return (
<div>
<button onClick={notify}>Make me a toast</button>
<Toaster />
</div>
);
};
```
## Documentation
Find the full API reference on [official documentation](https://react-hot-toast.com/docs).

122
frontend/node_modules/react-hot-toast/dist/index.d.ts generated vendored Normal file
View File

@@ -0,0 +1,122 @@
import * as react from 'react';
import { CSSProperties } from 'react';
import * as goober from 'goober';
type ToastType = 'success' | 'error' | 'loading' | 'blank' | 'custom';
type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
type Renderable = React.ReactElement | string | null;
interface IconTheme {
primary: string;
secondary: string;
}
type ValueFunction<TValue, TArg> = (arg: TArg) => TValue;
type ValueOrFunction<TValue, TArg> = TValue | ValueFunction<TValue, TArg>;
declare const resolveValue: <TValue, TArg>(valOrFunction: ValueOrFunction<TValue, TArg>, arg: TArg) => TValue;
interface Toast {
type: ToastType;
id: string;
message: ValueOrFunction<Renderable, Toast>;
icon?: Renderable;
duration?: number;
pauseDuration: number;
position?: ToastPosition;
removeDelay?: number;
ariaProps: {
role: 'status' | 'alert';
'aria-live': 'assertive' | 'off' | 'polite';
};
style?: CSSProperties;
className?: string;
iconTheme?: IconTheme;
createdAt: number;
visible: boolean;
dismissed: boolean;
height?: number;
}
type ToastOptions = Partial<Pick<Toast, 'id' | 'icon' | 'duration' | 'ariaProps' | 'className' | 'style' | 'position' | 'iconTheme' | 'removeDelay'>>;
type DefaultToastOptions = ToastOptions & {
[key in ToastType]?: ToastOptions;
};
interface ToasterProps {
position?: ToastPosition;
toastOptions?: DefaultToastOptions;
reverseOrder?: boolean;
gutter?: number;
containerStyle?: React.CSSProperties;
containerClassName?: string;
children?: (toast: Toast) => React.ReactElement;
}
type Message = ValueOrFunction<Renderable, Toast>;
type ToastHandler = (message: Message, options?: ToastOptions) => string;
declare const toast: {
(message: Message, opts?: ToastOptions): string;
error: ToastHandler;
success: ToastHandler;
loading: ToastHandler;
custom: ToastHandler;
dismiss(toastId?: string): void;
remove(toastId?: string): void;
promise<T>(promise: Promise<T> | (() => Promise<T>), msgs: {
loading: Renderable;
success?: ValueOrFunction<Renderable, T>;
error?: ValueOrFunction<Renderable, any>;
}, opts?: DefaultToastOptions): Promise<T>;
};
declare const useToaster: (toastOptions?: DefaultToastOptions) => {
toasts: Toast[];
handlers: {
updateHeight: (toastId: string, height: number) => void;
startPause: () => void;
endPause: () => void;
calculateOffset: (toast: Toast, opts?: {
reverseOrder?: boolean;
gutter?: number;
defaultPosition?: ToastPosition;
}) => number;
};
};
interface State {
toasts: Toast[];
pausedAt: number | undefined;
}
declare const useStore: (toastOptions?: DefaultToastOptions) => State;
interface ToastBarProps {
toast: Toast;
position?: ToastPosition;
style?: react.CSSProperties;
children?: (components: {
icon: Renderable;
message: Renderable;
}) => Renderable;
}
declare const ToastBar: react.FC<ToastBarProps>;
interface ErrorTheme {
primary?: string;
secondary?: string;
}
declare const ErrorIcon: goober.StyledVNode<Omit<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & goober.DefaultTheme & ErrorTheme, never>>;
interface LoaderTheme {
primary?: string;
secondary?: string;
}
declare const LoaderIcon: goober.StyledVNode<Omit<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & goober.DefaultTheme & LoaderTheme, never>>;
interface CheckmarkTheme {
primary?: string;
secondary?: string;
}
declare const CheckmarkIcon: goober.StyledVNode<Omit<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & goober.DefaultTheme & CheckmarkTheme, never>>;
declare const ToastIcon: react.FC<{
toast: Toast;
}>;
declare const Toaster: react.FC<ToasterProps>;
export { CheckmarkIcon, DefaultToastOptions, ErrorIcon, IconTheme, LoaderIcon, Renderable, Toast, ToastBar, ToastIcon, ToastOptions, ToastPosition, ToastType, Toaster, ToasterProps, ValueFunction, ValueOrFunction, toast as default, resolveValue, toast, useToaster, useStore as useToasterStore };

179
frontend/node_modules/react-hot-toast/dist/index.js generated vendored Normal file
View File

@@ -0,0 +1,179 @@
"use client";
"use strict";var q=Object.create;var O=Object.defineProperty;var G=Object.getOwnPropertyDescriptor;var J=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,X=Object.prototype.hasOwnProperty;var Z=(e,t)=>{for(var o in t)O(e,o,{get:t[o],enumerable:!0})},H=(e,t,o,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of J(t))!X.call(e,a)&&a!==o&&O(e,a,{get:()=>t[a],enumerable:!(s=G(t,a))||s.enumerable});return e};var W=(e,t,o)=>(o=e!=null?q(K(e)):{},H(t||!e||!e.__esModule?O(o,"default",{value:e,enumerable:!0}):o,e)),ee=e=>H(O({},"__esModule",{value:!0}),e);var Ve={};Z(Ve,{CheckmarkIcon:()=>F,ErrorIcon:()=>w,LoaderIcon:()=>C,ToastBar:()=>$,ToastIcon:()=>U,Toaster:()=>Y,default:()=>ke,resolveValue:()=>u,toast:()=>n,useToaster:()=>_,useToasterStore:()=>V});module.exports=ee(Ve);var te=e=>typeof e=="function",u=(e,t)=>te(e)?e(t):e;var j=(()=>{let e=0;return()=>(++e).toString()})(),I=(()=>{let e;return()=>{if(e===void 0&&typeof window<"u"){let t=matchMedia("(prefers-reduced-motion: reduce)");e=!t||t.matches}return e}})();var x=require("react"),oe=20;var Q=(e,t)=>{switch(t.type){case 0:return{...e,toasts:[t.toast,...e.toasts].slice(0,oe)};case 1:return{...e,toasts:e.toasts.map(r=>r.id===t.toast.id?{...r,...t.toast}:r)};case 2:let{toast:o}=t;return Q(e,{type:e.toasts.find(r=>r.id===o.id)?1:0,toast:o});case 3:let{toastId:s}=t;return{...e,toasts:e.toasts.map(r=>r.id===s||s===void 0?{...r,dismissed:!0,visible:!1}:r)};case 4:return t.toastId===void 0?{...e,toasts:[]}:{...e,toasts:e.toasts.filter(r=>r.id!==t.toastId)};case 5:return{...e,pausedAt:t.time};case 6:let a=t.time-(e.pausedAt||0);return{...e,pausedAt:void 0,toasts:e.toasts.map(r=>({...r,pauseDuration:r.pauseDuration+a}))}}},k=[],y={toasts:[],pausedAt:void 0},l=e=>{y=Q(y,e),k.forEach(t=>{t(y)})},re={blank:4e3,error:4e3,success:2e3,loading:1/0,custom:4e3},V=(e={})=>{let[t,o]=(0,x.useState)(y),s=(0,x.useRef)(y);(0,x.useEffect)(()=>(s.current!==y&&o(y),k.push(o),()=>{let r=k.indexOf(o);r>-1&&k.splice(r,1)}),[]);let a=t.toasts.map(r=>{var c,i,p;return{...e,...e[r.type],...r,removeDelay:r.removeDelay||((c=e[r.type])==null?void 0:c.removeDelay)||(e==null?void 0:e.removeDelay),duration:r.duration||((i=e[r.type])==null?void 0:i.duration)||(e==null?void 0:e.duration)||re[r.type],style:{...e.style,...(p=e[r.type])==null?void 0:p.style,...r.style}}});return{...t,toasts:a}};var ae=(e,t="blank",o)=>({createdAt:Date.now(),visible:!0,dismissed:!1,type:t,ariaProps:{role:"status","aria-live":"polite"},message:e,pauseDuration:0,...o,id:(o==null?void 0:o.id)||j()}),R=e=>(t,o)=>{let s=ae(t,e,o);return l({type:2,toast:s}),s.id},n=(e,t)=>R("blank")(e,t);n.error=R("error");n.success=R("success");n.loading=R("loading");n.custom=R("custom");n.dismiss=e=>{l({type:3,toastId:e})};n.remove=e=>l({type:4,toastId:e});n.promise=(e,t,o)=>{let s=n.loading(t.loading,{...o,...o==null?void 0:o.loading});return typeof e=="function"&&(e=e()),e.then(a=>{let r=t.success?u(t.success,a):void 0;return r?n.success(r,{id:s,...o,...o==null?void 0:o.success}):n.dismiss(s),a}).catch(a=>{let r=t.error?u(t.error,a):void 0;r?n.error(r,{id:s,...o,...o==null?void 0:o.error}):n.dismiss(s)}),e};var b=require("react");var ie=(e,t)=>{l({type:1,toast:{id:e,height:t}})},ne=()=>{l({type:5,time:Date.now()})},v=new Map,ce=1e3,pe=(e,t=ce)=>{if(v.has(e))return;let o=setTimeout(()=>{v.delete(e),l({type:4,toastId:e})},t);v.set(e,o)},_=e=>{let{toasts:t,pausedAt:o}=V(e);(0,b.useEffect)(()=>{if(o)return;let r=Date.now(),c=t.map(i=>{if(i.duration===1/0)return;let p=(i.duration||0)+i.pauseDuration-(r-i.createdAt);if(p<0){i.visible&&n.dismiss(i.id);return}return setTimeout(()=>n.dismiss(i.id),p)});return()=>{c.forEach(i=>i&&clearTimeout(i))}},[t,o]);let s=(0,b.useCallback)(()=>{o&&l({type:6,time:Date.now()})},[o]),a=(0,b.useCallback)((r,c)=>{let{reverseOrder:i=!1,gutter:p=8,defaultPosition:d}=c||{},h=t.filter(m=>(m.position||d)===(r.position||d)&&m.height),z=h.findIndex(m=>m.id===r.id),D=h.filter((m,B)=>B<z&&m.visible).length;return h.filter(m=>m.visible).slice(...i?[D+1]:[0,D]).reduce((m,B)=>m+(B.height||0)+p,0)},[t]);return(0,b.useEffect)(()=>{t.forEach(r=>{if(r.dismissed)pe(r.id,r.removeDelay);else{let c=v.get(r.id);c&&(clearTimeout(c),v.delete(r.id))}})},[t]),{toasts:t,handlers:{updateHeight:ie,startPause:ne,endPause:s,calculateOffset:a}}};var f=W(require("react")),P=require("goober");var g=W(require("react")),A=require("goober");var S=require("goober"),de=S.keyframes`
from {
transform: scale(0) rotate(45deg);
opacity: 0;
}
to {
transform: scale(1) rotate(45deg);
opacity: 1;
}`,me=S.keyframes`
from {
transform: scale(0);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}`,ue=S.keyframes`
from {
transform: scale(0) rotate(90deg);
opacity: 0;
}
to {
transform: scale(1) rotate(90deg);
opacity: 1;
}`,w=(0,S.styled)("div")`
width: 20px;
opacity: 0;
height: 20px;
border-radius: 10px;
background: ${e=>e.primary||"#ff4b4b"};
position: relative;
transform: rotate(45deg);
animation: ${de} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
forwards;
animation-delay: 100ms;
&:after,
&:before {
content: '';
animation: ${me} 0.15s ease-out forwards;
animation-delay: 150ms;
position: absolute;
border-radius: 3px;
opacity: 0;
background: ${e=>e.secondary||"#fff"};
bottom: 9px;
left: 4px;
height: 2px;
width: 12px;
}
&:before {
animation: ${ue} 0.15s ease-out forwards;
animation-delay: 180ms;
transform: rotate(90deg);
}
`;var M=require("goober"),le=M.keyframes`
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
`,C=(0,M.styled)("div")`
width: 12px;
height: 12px;
box-sizing: border-box;
border: 2px solid;
border-radius: 100%;
border-color: ${e=>e.secondary||"#e0e0e0"};
border-right-color: ${e=>e.primary||"#616161"};
animation: ${le} 1s linear infinite;
`;var E=require("goober"),fe=E.keyframes`
from {
transform: scale(0) rotate(45deg);
opacity: 0;
}
to {
transform: scale(1) rotate(45deg);
opacity: 1;
}`,Te=E.keyframes`
0% {
height: 0;
width: 0;
opacity: 0;
}
40% {
height: 0;
width: 6px;
opacity: 1;
}
100% {
opacity: 1;
height: 10px;
}`,F=(0,E.styled)("div")`
width: 20px;
opacity: 0;
height: 20px;
border-radius: 10px;
background: ${e=>e.primary||"#61d345"};
position: relative;
transform: rotate(45deg);
animation: ${fe} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
forwards;
animation-delay: 100ms;
&:after {
content: '';
box-sizing: border-box;
animation: ${Te} 0.2s ease-out forwards;
opacity: 0;
animation-delay: 200ms;
position: absolute;
border-right: 2px solid;
border-bottom: 2px solid;
border-color: ${e=>e.secondary||"#fff"};
bottom: 6px;
left: 6px;
height: 10px;
width: 6px;
}
`;var ye=(0,A.styled)("div")`
position: absolute;
`,ge=(0,A.styled)("div")`
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-width: 20px;
min-height: 20px;
`,he=A.keyframes`
from {
transform: scale(0.6);
opacity: 0.4;
}
to {
transform: scale(1);
opacity: 1;
}`,xe=(0,A.styled)("div")`
position: relative;
transform: scale(0.6);
opacity: 0.4;
min-width: 20px;
animation: ${he} 0.3s 0.12s cubic-bezier(0.175, 0.885, 0.32, 1.275)
forwards;
`,U=({toast:e})=>{let{icon:t,type:o,iconTheme:s}=e;return t!==void 0?typeof t=="string"?g.createElement(xe,null,t):t:o==="blank"?null:g.createElement(ge,null,g.createElement(C,{...s}),o!=="loading"&&g.createElement(ye,null,o==="error"?g.createElement(w,{...s}):g.createElement(F,{...s})))};var be=e=>`
0% {transform: translate3d(0,${e*-200}%,0) scale(.6); opacity:.5;}
100% {transform: translate3d(0,0,0) scale(1); opacity:1;}
`,Se=e=>`
0% {transform: translate3d(0,0,-1px) scale(1); opacity:1;}
100% {transform: translate3d(0,${e*-150}%,-1px) scale(.6); opacity:0;}
`,Ae="0%{opacity:0;} 100%{opacity:1;}",Pe="0%{opacity:1;} 100%{opacity:0;}",Re=(0,P.styled)("div")`
display: flex;
align-items: center;
background: #fff;
color: #363636;
line-height: 1.3;
will-change: transform;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05);
max-width: 350px;
pointer-events: auto;
padding: 8px 10px;
border-radius: 8px;
`,ve=(0,P.styled)("div")`
display: flex;
justify-content: center;
margin: 4px 10px;
color: inherit;
flex: 1 1 auto;
white-space: pre-line;
`,Ee=(e,t)=>{let s=e.includes("top")?1:-1,[a,r]=I()?[Ae,Pe]:[be(s),Se(s)];return{animation:t?`${(0,P.keyframes)(a)} 0.35s cubic-bezier(.21,1.02,.73,1) forwards`:`${(0,P.keyframes)(r)} 0.4s forwards cubic-bezier(.06,.71,.55,1)`}},$=f.memo(({toast:e,position:t,style:o,children:s})=>{let a=e.height?Ee(e.position||t||"top-center",e.visible):{opacity:0},r=f.createElement(U,{toast:e}),c=f.createElement(ve,{...e.ariaProps},u(e.message,e));return f.createElement(Re,{className:e.className,style:{...a,...o,...e.style}},typeof s=="function"?s({icon:r,message:c}):f.createElement(f.Fragment,null,r,c))});var N=require("goober"),T=W(require("react"));(0,N.setup)(T.createElement);var De=({id:e,className:t,style:o,onHeightUpdate:s,children:a})=>{let r=T.useCallback(c=>{if(c){let i=()=>{let p=c.getBoundingClientRect().height;s(e,p)};i(),new MutationObserver(i).observe(c,{subtree:!0,childList:!0,characterData:!0})}},[e,s]);return T.createElement("div",{ref:r,className:t,style:o},a)},Oe=(e,t)=>{let o=e.includes("top"),s=o?{top:0}:{bottom:0},a=e.includes("center")?{justifyContent:"center"}:e.includes("right")?{justifyContent:"flex-end"}:{};return{left:0,right:0,display:"flex",position:"absolute",transition:I()?void 0:"all 230ms cubic-bezier(.21,1.02,.73,1)",transform:`translateY(${t*(o?1:-1)}px)`,...s,...a}},Ie=N.css`
z-index: 9999;
> * {
pointer-events: auto;
}
`,L=16,Y=({reverseOrder:e,position:t="top-center",toastOptions:o,gutter:s,children:a,containerStyle:r,containerClassName:c})=>{let{toasts:i,handlers:p}=_(o);return T.createElement("div",{id:"_rht_toaster",style:{position:"fixed",zIndex:9999,top:L,left:L,right:L,bottom:L,pointerEvents:"none",...r},className:c,onMouseEnter:p.startPause,onMouseLeave:p.endPause},i.map(d=>{let h=d.position||t,z=p.calculateOffset(d,{reverseOrder:e,gutter:s,defaultPosition:t}),D=Oe(h,z);return T.createElement(De,{id:d.id,key:d.id,onHeightUpdate:p.updateHeight,className:d.visible?Ie:"",style:D},d.type==="custom"?u(d.message,d):a?a(d):T.createElement($,{toast:d,position:h}))}))};var ke=n;0&&(module.exports={CheckmarkIcon,ErrorIcon,LoaderIcon,ToastBar,ToastIcon,Toaster,resolveValue,toast,useToaster,useToasterStore});
//# sourceMappingURL=index.js.map

File diff suppressed because one or more lines are too long

179
frontend/node_modules/react-hot-toast/dist/index.mjs generated vendored Normal file
View File

@@ -0,0 +1,179 @@
"use client";
var W=e=>typeof e=="function",f=(e,t)=>W(e)?e(t):e;var F=(()=>{let e=0;return()=>(++e).toString()})(),A=(()=>{let e;return()=>{if(e===void 0&&typeof window<"u"){let t=matchMedia("(prefers-reduced-motion: reduce)");e=!t||t.matches}return e}})();import{useEffect as H,useState as j,useRef as Q}from"react";var Y=20;var U=(e,t)=>{switch(t.type){case 0:return{...e,toasts:[t.toast,...e.toasts].slice(0,Y)};case 1:return{...e,toasts:e.toasts.map(o=>o.id===t.toast.id?{...o,...t.toast}:o)};case 2:let{toast:r}=t;return U(e,{type:e.toasts.find(o=>o.id===r.id)?1:0,toast:r});case 3:let{toastId:s}=t;return{...e,toasts:e.toasts.map(o=>o.id===s||s===void 0?{...o,dismissed:!0,visible:!1}:o)};case 4:return t.toastId===void 0?{...e,toasts:[]}:{...e,toasts:e.toasts.filter(o=>o.id!==t.toastId)};case 5:return{...e,pausedAt:t.time};case 6:let a=t.time-(e.pausedAt||0);return{...e,pausedAt:void 0,toasts:e.toasts.map(o=>({...o,pauseDuration:o.pauseDuration+a}))}}},P=[],y={toasts:[],pausedAt:void 0},u=e=>{y=U(y,e),P.forEach(t=>{t(y)})},q={blank:4e3,error:4e3,success:2e3,loading:1/0,custom:4e3},D=(e={})=>{let[t,r]=j(y),s=Q(y);H(()=>(s.current!==y&&r(y),P.push(r),()=>{let o=P.indexOf(r);o>-1&&P.splice(o,1)}),[]);let a=t.toasts.map(o=>{var n,i,p;return{...e,...e[o.type],...o,removeDelay:o.removeDelay||((n=e[o.type])==null?void 0:n.removeDelay)||(e==null?void 0:e.removeDelay),duration:o.duration||((i=e[o.type])==null?void 0:i.duration)||(e==null?void 0:e.duration)||q[o.type],style:{...e.style,...(p=e[o.type])==null?void 0:p.style,...o.style}}});return{...t,toasts:a}};var J=(e,t="blank",r)=>({createdAt:Date.now(),visible:!0,dismissed:!1,type:t,ariaProps:{role:"status","aria-live":"polite"},message:e,pauseDuration:0,...r,id:(r==null?void 0:r.id)||F()}),x=e=>(t,r)=>{let s=J(t,e,r);return u({type:2,toast:s}),s.id},c=(e,t)=>x("blank")(e,t);c.error=x("error");c.success=x("success");c.loading=x("loading");c.custom=x("custom");c.dismiss=e=>{u({type:3,toastId:e})};c.remove=e=>u({type:4,toastId:e});c.promise=(e,t,r)=>{let s=c.loading(t.loading,{...r,...r==null?void 0:r.loading});return typeof e=="function"&&(e=e()),e.then(a=>{let o=t.success?f(t.success,a):void 0;return o?c.success(o,{id:s,...r,...r==null?void 0:r.success}):c.dismiss(s),a}).catch(a=>{let o=t.error?f(t.error,a):void 0;o?c.error(o,{id:s,...r,...r==null?void 0:r.error}):c.dismiss(s)}),e};import{useEffect as $,useCallback as L}from"react";var K=(e,t)=>{u({type:1,toast:{id:e,height:t}})},X=()=>{u({type:5,time:Date.now()})},b=new Map,Z=1e3,ee=(e,t=Z)=>{if(b.has(e))return;let r=setTimeout(()=>{b.delete(e),u({type:4,toastId:e})},t);b.set(e,r)},O=e=>{let{toasts:t,pausedAt:r}=D(e);$(()=>{if(r)return;let o=Date.now(),n=t.map(i=>{if(i.duration===1/0)return;let p=(i.duration||0)+i.pauseDuration-(o-i.createdAt);if(p<0){i.visible&&c.dismiss(i.id);return}return setTimeout(()=>c.dismiss(i.id),p)});return()=>{n.forEach(i=>i&&clearTimeout(i))}},[t,r]);let s=L(()=>{r&&u({type:6,time:Date.now()})},[r]),a=L((o,n)=>{let{reverseOrder:i=!1,gutter:p=8,defaultPosition:d}=n||{},h=t.filter(m=>(m.position||d)===(o.position||d)&&m.height),v=h.findIndex(m=>m.id===o.id),S=h.filter((m,E)=>E<v&&m.visible).length;return h.filter(m=>m.visible).slice(...i?[S+1]:[0,S]).reduce((m,E)=>m+(E.height||0)+p,0)},[t]);return $(()=>{t.forEach(o=>{if(o.dismissed)ee(o.id,o.removeDelay);else{let n=b.get(o.id);n&&(clearTimeout(n),b.delete(o.id))}})},[t]),{toasts:t,handlers:{updateHeight:K,startPause:X,endPause:s,calculateOffset:a}}};import*as l from"react";import{styled as B,keyframes as z}from"goober";import*as g from"react";import{styled as w,keyframes as me}from"goober";import{styled as te,keyframes as I}from"goober";var oe=I`
from {
transform: scale(0) rotate(45deg);
opacity: 0;
}
to {
transform: scale(1) rotate(45deg);
opacity: 1;
}`,re=I`
from {
transform: scale(0);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}`,se=I`
from {
transform: scale(0) rotate(90deg);
opacity: 0;
}
to {
transform: scale(1) rotate(90deg);
opacity: 1;
}`,k=te("div")`
width: 20px;
opacity: 0;
height: 20px;
border-radius: 10px;
background: ${e=>e.primary||"#ff4b4b"};
position: relative;
transform: rotate(45deg);
animation: ${oe} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
forwards;
animation-delay: 100ms;
&:after,
&:before {
content: '';
animation: ${re} 0.15s ease-out forwards;
animation-delay: 150ms;
position: absolute;
border-radius: 3px;
opacity: 0;
background: ${e=>e.secondary||"#fff"};
bottom: 9px;
left: 4px;
height: 2px;
width: 12px;
}
&:before {
animation: ${se} 0.15s ease-out forwards;
animation-delay: 180ms;
transform: rotate(90deg);
}
`;import{styled as ae,keyframes as ie}from"goober";var ne=ie`
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
`,V=ae("div")`
width: 12px;
height: 12px;
box-sizing: border-box;
border: 2px solid;
border-radius: 100%;
border-color: ${e=>e.secondary||"#e0e0e0"};
border-right-color: ${e=>e.primary||"#616161"};
animation: ${ne} 1s linear infinite;
`;import{styled as ce,keyframes as N}from"goober";var pe=N`
from {
transform: scale(0) rotate(45deg);
opacity: 0;
}
to {
transform: scale(1) rotate(45deg);
opacity: 1;
}`,de=N`
0% {
height: 0;
width: 0;
opacity: 0;
}
40% {
height: 0;
width: 6px;
opacity: 1;
}
100% {
opacity: 1;
height: 10px;
}`,_=ce("div")`
width: 20px;
opacity: 0;
height: 20px;
border-radius: 10px;
background: ${e=>e.primary||"#61d345"};
position: relative;
transform: rotate(45deg);
animation: ${pe} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
forwards;
animation-delay: 100ms;
&:after {
content: '';
box-sizing: border-box;
animation: ${de} 0.2s ease-out forwards;
opacity: 0;
animation-delay: 200ms;
position: absolute;
border-right: 2px solid;
border-bottom: 2px solid;
border-color: ${e=>e.secondary||"#fff"};
bottom: 6px;
left: 6px;
height: 10px;
width: 6px;
}
`;var ue=w("div")`
position: absolute;
`,le=w("div")`
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-width: 20px;
min-height: 20px;
`,fe=me`
from {
transform: scale(0.6);
opacity: 0.4;
}
to {
transform: scale(1);
opacity: 1;
}`,Te=w("div")`
position: relative;
transform: scale(0.6);
opacity: 0.4;
min-width: 20px;
animation: ${fe} 0.3s 0.12s cubic-bezier(0.175, 0.885, 0.32, 1.275)
forwards;
`,M=({toast:e})=>{let{icon:t,type:r,iconTheme:s}=e;return t!==void 0?typeof t=="string"?g.createElement(Te,null,t):t:r==="blank"?null:g.createElement(le,null,g.createElement(V,{...s}),r!=="loading"&&g.createElement(ue,null,r==="error"?g.createElement(k,{...s}):g.createElement(_,{...s})))};var ye=e=>`
0% {transform: translate3d(0,${e*-200}%,0) scale(.6); opacity:.5;}
100% {transform: translate3d(0,0,0) scale(1); opacity:1;}
`,ge=e=>`
0% {transform: translate3d(0,0,-1px) scale(1); opacity:1;}
100% {transform: translate3d(0,${e*-150}%,-1px) scale(.6); opacity:0;}
`,he="0%{opacity:0;} 100%{opacity:1;}",xe="0%{opacity:1;} 100%{opacity:0;}",be=B("div")`
display: flex;
align-items: center;
background: #fff;
color: #363636;
line-height: 1.3;
will-change: transform;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05);
max-width: 350px;
pointer-events: auto;
padding: 8px 10px;
border-radius: 8px;
`,Se=B("div")`
display: flex;
justify-content: center;
margin: 4px 10px;
color: inherit;
flex: 1 1 auto;
white-space: pre-line;
`,Ae=(e,t)=>{let s=e.includes("top")?1:-1,[a,o]=A()?[he,xe]:[ye(s),ge(s)];return{animation:t?`${z(a)} 0.35s cubic-bezier(.21,1.02,.73,1) forwards`:`${z(o)} 0.4s forwards cubic-bezier(.06,.71,.55,1)`}},C=l.memo(({toast:e,position:t,style:r,children:s})=>{let a=e.height?Ae(e.position||t||"top-center",e.visible):{opacity:0},o=l.createElement(M,{toast:e}),n=l.createElement(Se,{...e.ariaProps},f(e.message,e));return l.createElement(be,{className:e.className,style:{...a,...r,...e.style}},typeof s=="function"?s({icon:o,message:n}):l.createElement(l.Fragment,null,o,n))});import{css as Pe,setup as Re}from"goober";import*as T from"react";Re(T.createElement);var ve=({id:e,className:t,style:r,onHeightUpdate:s,children:a})=>{let o=T.useCallback(n=>{if(n){let i=()=>{let p=n.getBoundingClientRect().height;s(e,p)};i(),new MutationObserver(i).observe(n,{subtree:!0,childList:!0,characterData:!0})}},[e,s]);return T.createElement("div",{ref:o,className:t,style:r},a)},Ee=(e,t)=>{let r=e.includes("top"),s=r?{top:0}:{bottom:0},a=e.includes("center")?{justifyContent:"center"}:e.includes("right")?{justifyContent:"flex-end"}:{};return{left:0,right:0,display:"flex",position:"absolute",transition:A()?void 0:"all 230ms cubic-bezier(.21,1.02,.73,1)",transform:`translateY(${t*(r?1:-1)}px)`,...s,...a}},De=Pe`
z-index: 9999;
> * {
pointer-events: auto;
}
`,R=16,Oe=({reverseOrder:e,position:t="top-center",toastOptions:r,gutter:s,children:a,containerStyle:o,containerClassName:n})=>{let{toasts:i,handlers:p}=O(r);return T.createElement("div",{id:"_rht_toaster",style:{position:"fixed",zIndex:9999,top:R,left:R,right:R,bottom:R,pointerEvents:"none",...o},className:n,onMouseEnter:p.startPause,onMouseLeave:p.endPause},i.map(d=>{let h=d.position||t,v=p.calculateOffset(d,{reverseOrder:e,gutter:s,defaultPosition:t}),S=Ee(h,v);return T.createElement(ve,{id:d.id,key:d.id,onHeightUpdate:p.updateHeight,className:d.visible?De:"",style:S},d.type==="custom"?f(d.message,d):a?a(d):T.createElement(C,{toast:d,position:h}))}))};var Vt=c;export{_ as CheckmarkIcon,k as ErrorIcon,V as LoaderIcon,C as ToastBar,M as ToastIcon,Oe as Toaster,Vt as default,f as resolveValue,c as toast,O as useToaster,D as useToasterStore};
//# sourceMappingURL=index.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,85 @@
import { CSSProperties } from 'react';
type ToastType = 'success' | 'error' | 'loading' | 'blank' | 'custom';
type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
type Renderable = React.ReactElement | string | null;
interface IconTheme {
primary: string;
secondary: string;
}
type ValueFunction<TValue, TArg> = (arg: TArg) => TValue;
type ValueOrFunction<TValue, TArg> = TValue | ValueFunction<TValue, TArg>;
declare const resolveValue: <TValue, TArg>(valOrFunction: ValueOrFunction<TValue, TArg>, arg: TArg) => TValue;
interface Toast {
type: ToastType;
id: string;
message: ValueOrFunction<Renderable, Toast>;
icon?: Renderable;
duration?: number;
pauseDuration: number;
position?: ToastPosition;
removeDelay?: number;
ariaProps: {
role: 'status' | 'alert';
'aria-live': 'assertive' | 'off' | 'polite';
};
style?: CSSProperties;
className?: string;
iconTheme?: IconTheme;
createdAt: number;
visible: boolean;
dismissed: boolean;
height?: number;
}
type ToastOptions = Partial<Pick<Toast, 'id' | 'icon' | 'duration' | 'ariaProps' | 'className' | 'style' | 'position' | 'iconTheme' | 'removeDelay'>>;
type DefaultToastOptions = ToastOptions & {
[key in ToastType]?: ToastOptions;
};
interface ToasterProps {
position?: ToastPosition;
toastOptions?: DefaultToastOptions;
reverseOrder?: boolean;
gutter?: number;
containerStyle?: React.CSSProperties;
containerClassName?: string;
children?: (toast: Toast) => React.ReactElement;
}
type Message = ValueOrFunction<Renderable, Toast>;
type ToastHandler = (message: Message, options?: ToastOptions) => string;
declare const toast: {
(message: Message, opts?: ToastOptions): string;
error: ToastHandler;
success: ToastHandler;
loading: ToastHandler;
custom: ToastHandler;
dismiss(toastId?: string): void;
remove(toastId?: string): void;
promise<T>(promise: Promise<T> | (() => Promise<T>), msgs: {
loading: Renderable;
success?: ValueOrFunction<Renderable, T>;
error?: ValueOrFunction<Renderable, any>;
}, opts?: DefaultToastOptions): Promise<T>;
};
declare const useToaster: (toastOptions?: DefaultToastOptions) => {
toasts: Toast[];
handlers: {
updateHeight: (toastId: string, height: number) => void;
startPause: () => void;
endPause: () => void;
calculateOffset: (toast: Toast, opts?: {
reverseOrder?: boolean;
gutter?: number;
defaultPosition?: ToastPosition;
}) => number;
};
};
interface State {
toasts: Toast[];
pausedAt: number | undefined;
}
declare const useStore: (toastOptions?: DefaultToastOptions) => State;
export { DefaultToastOptions, IconTheme, Renderable, Toast, ToastOptions, ToastPosition, ToastType, ToasterProps, ValueFunction, ValueOrFunction, toast as default, resolveValue, toast, useToaster, useStore as useToasterStore };

View File

@@ -0,0 +1,2 @@
"use strict";var P=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var I=Object.prototype.hasOwnProperty;var M=(e,t)=>{for(var r in t)P(e,r,{get:t[r],enumerable:!0})},U=(e,t,r,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of v(t))!I.call(e,n)&&n!==r&&P(e,n,{get:()=>t[n],enumerable:!(a=_(t,n))||a.enumerable});return e};var F=e=>U(P({},"__esModule",{value:!0}),e);var j={};M(j,{default:()=>Y,resolveValue:()=>m,toast:()=>s,useToaster:()=>V,useToasterStore:()=>g});module.exports=F(j);var w=e=>typeof e=="function",m=(e,t)=>w(e)?e(t):e;var R=(()=>{let e=0;return()=>(++e).toString()})(),J=(()=>{let e;return()=>{if(e===void 0&&typeof window<"u"){let t=matchMedia("(prefers-reduced-motion: reduce)");e=!t||t.matches}return e}})();var p=require("react"),N=20;var h=(e,t)=>{switch(t.type){case 0:return{...e,toasts:[t.toast,...e.toasts].slice(0,N)};case 1:return{...e,toasts:e.toasts.map(o=>o.id===t.toast.id?{...o,...t.toast}:o)};case 2:let{toast:r}=t;return h(e,{type:e.toasts.find(o=>o.id===r.id)?1:0,toast:r});case 3:let{toastId:a}=t;return{...e,toasts:e.toasts.map(o=>o.id===a||a===void 0?{...o,dismissed:!0,visible:!1}:o)};case 4:return t.toastId===void 0?{...e,toasts:[]}:{...e,toasts:e.toasts.filter(o=>o.id!==t.toastId)};case 5:return{...e,pausedAt:t.time};case 6:let n=t.time-(e.pausedAt||0);return{...e,pausedAt:void 0,toasts:e.toasts.map(o=>({...o,pauseDuration:o.pauseDuration+n}))}}},A=[],l={toasts:[],pausedAt:void 0},c=e=>{l=h(l,e),A.forEach(t=>{t(l)})},k={blank:4e3,error:4e3,success:2e3,loading:1/0,custom:4e3},g=(e={})=>{let[t,r]=(0,p.useState)(l),a=(0,p.useRef)(l);(0,p.useEffect)(()=>(a.current!==l&&r(l),A.push(r),()=>{let o=A.indexOf(r);o>-1&&A.splice(o,1)}),[]);let n=t.toasts.map(o=>{var T,i,d;return{...e,...e[o.type],...o,removeDelay:o.removeDelay||((T=e[o.type])==null?void 0:T.removeDelay)||(e==null?void 0:e.removeDelay),duration:o.duration||((i=e[o.type])==null?void 0:i.duration)||(e==null?void 0:e.duration)||k[o.type],style:{...e.style,...(d=e[o.type])==null?void 0:d.style,...o.style}}});return{...t,toasts:n}};var H=(e,t="blank",r)=>({createdAt:Date.now(),visible:!0,dismissed:!1,type:t,ariaProps:{role:"status","aria-live":"polite"},message:e,pauseDuration:0,...r,id:(r==null?void 0:r.id)||R()}),y=e=>(t,r)=>{let a=H(t,e,r);return c({type:2,toast:a}),a.id},s=(e,t)=>y("blank")(e,t);s.error=y("error");s.success=y("success");s.loading=y("loading");s.custom=y("custom");s.dismiss=e=>{c({type:3,toastId:e})};s.remove=e=>c({type:4,toastId:e});s.promise=(e,t,r)=>{let a=s.loading(t.loading,{...r,...r==null?void 0:r.loading});return typeof e=="function"&&(e=e()),e.then(n=>{let o=t.success?m(t.success,n):void 0;return o?s.success(o,{id:a,...r,...r==null?void 0:r.success}):s.dismiss(a),n}).catch(n=>{let o=t.error?m(t.error,n):void 0;o?s.error(o,{id:a,...r,...r==null?void 0:r.error}):s.dismiss(a)}),e};var f=require("react");var L=(e,t)=>{c({type:1,toast:{id:e,height:t}})},Q=()=>{c({type:5,time:Date.now()})},S=new Map,B=1e3,W=(e,t=B)=>{if(S.has(e))return;let r=setTimeout(()=>{S.delete(e),c({type:4,toastId:e})},t);S.set(e,r)},V=e=>{let{toasts:t,pausedAt:r}=g(e);(0,f.useEffect)(()=>{if(r)return;let o=Date.now(),T=t.map(i=>{if(i.duration===1/0)return;let d=(i.duration||0)+i.pauseDuration-(o-i.createdAt);if(d<0){i.visible&&s.dismiss(i.id);return}return setTimeout(()=>s.dismiss(i.id),d)});return()=>{T.forEach(i=>i&&clearTimeout(i))}},[t,r]);let a=(0,f.useCallback)(()=>{r&&c({type:6,time:Date.now()})},[r]),n=(0,f.useCallback)((o,T)=>{let{reverseOrder:i=!1,gutter:d=8,defaultPosition:b}=T||{},D=t.filter(u=>(u.position||b)===(o.position||b)&&u.height),x=D.findIndex(u=>u.id===o.id),E=D.filter((u,O)=>O<x&&u.visible).length;return D.filter(u=>u.visible).slice(...i?[E+1]:[0,E]).reduce((u,O)=>u+(O.height||0)+d,0)},[t]);return(0,f.useEffect)(()=>{t.forEach(o=>{if(o.dismissed)W(o.id,o.removeDelay);else{let T=S.get(o.id);T&&(clearTimeout(T),S.delete(o.id))}})},[t]),{toasts:t,handlers:{updateHeight:L,startPause:Q,endPause:a,calculateOffset:n}}};var Y=s;0&&(module.exports={resolveValue,toast,useToaster,useToasterStore});
//# sourceMappingURL=index.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,2 @@
var V=e=>typeof e=="function",m=(e,t)=>V(e)?e(t):e;var P=(()=>{let e=0;return()=>(++e).toString()})(),B=(()=>{let e;return()=>{if(e===void 0&&typeof window<"u"){let t=matchMedia("(prefers-reduced-motion: reduce)");e=!t||t.matches}return e}})();import{useEffect as x,useState as _,useRef as v}from"react";var I=20;var b=(e,t)=>{switch(t.type){case 0:return{...e,toasts:[t.toast,...e.toasts].slice(0,I)};case 1:return{...e,toasts:e.toasts.map(o=>o.id===t.toast.id?{...o,...t.toast}:o)};case 2:let{toast:r}=t;return b(e,{type:e.toasts.find(o=>o.id===r.id)?1:0,toast:r});case 3:let{toastId:n}=t;return{...e,toasts:e.toasts.map(o=>o.id===n||n===void 0?{...o,dismissed:!0,visible:!1}:o)};case 4:return t.toastId===void 0?{...e,toasts:[]}:{...e,toasts:e.toasts.filter(o=>o.id!==t.toastId)};case 5:return{...e,pausedAt:t.time};case 6:let i=t.time-(e.pausedAt||0);return{...e,pausedAt:void 0,toasts:e.toasts.map(o=>({...o,pauseDuration:o.pauseDuration+i}))}}},y=[],l={toasts:[],pausedAt:void 0},c=e=>{l=b(l,e),y.forEach(t=>{t(l)})},M={blank:4e3,error:4e3,success:2e3,loading:1/0,custom:4e3},g=(e={})=>{let[t,r]=_(l),n=v(l);x(()=>(n.current!==l&&r(l),y.push(r),()=>{let o=y.indexOf(r);o>-1&&y.splice(o,1)}),[]);let i=t.toasts.map(o=>{var T,a,d;return{...e,...e[o.type],...o,removeDelay:o.removeDelay||((T=e[o.type])==null?void 0:T.removeDelay)||(e==null?void 0:e.removeDelay),duration:o.duration||((a=e[o.type])==null?void 0:a.duration)||(e==null?void 0:e.duration)||M[o.type],style:{...e.style,...(d=e[o.type])==null?void 0:d.style,...o.style}}});return{...t,toasts:i}};var F=(e,t="blank",r)=>({createdAt:Date.now(),visible:!0,dismissed:!1,type:t,ariaProps:{role:"status","aria-live":"polite"},message:e,pauseDuration:0,...r,id:(r==null?void 0:r.id)||P()}),p=e=>(t,r)=>{let n=F(t,e,r);return c({type:2,toast:n}),n.id},s=(e,t)=>p("blank")(e,t);s.error=p("error");s.success=p("success");s.loading=p("loading");s.custom=p("custom");s.dismiss=e=>{c({type:3,toastId:e})};s.remove=e=>c({type:4,toastId:e});s.promise=(e,t,r)=>{let n=s.loading(t.loading,{...r,...r==null?void 0:r.loading});return typeof e=="function"&&(e=e()),e.then(i=>{let o=t.success?m(t.success,i):void 0;return o?s.success(o,{id:n,...r,...r==null?void 0:r.success}):s.dismiss(n),i}).catch(i=>{let o=t.error?m(t.error,i):void 0;o?s.error(o,{id:n,...r,...r==null?void 0:r.error}):s.dismiss(n)}),e};import{useEffect as E,useCallback as R}from"react";var w=(e,t)=>{c({type:1,toast:{id:e,height:t}})},N=()=>{c({type:5,time:Date.now()})},f=new Map,k=1e3,C=(e,t=k)=>{if(f.has(e))return;let r=setTimeout(()=>{f.delete(e),c({type:4,toastId:e})},t);f.set(e,r)},H=e=>{let{toasts:t,pausedAt:r}=g(e);E(()=>{if(r)return;let o=Date.now(),T=t.map(a=>{if(a.duration===1/0)return;let d=(a.duration||0)+a.pauseDuration-(o-a.createdAt);if(d<0){a.visible&&s.dismiss(a.id);return}return setTimeout(()=>s.dismiss(a.id),d)});return()=>{T.forEach(a=>a&&clearTimeout(a))}},[t,r]);let n=R(()=>{r&&c({type:6,time:Date.now()})},[r]),i=R((o,T)=>{let{reverseOrder:a=!1,gutter:d=8,defaultPosition:D}=T||{},S=t.filter(u=>(u.position||D)===(o.position||D)&&u.height),h=S.findIndex(u=>u.id===o.id),O=S.filter((u,A)=>A<h&&u.visible).length;return S.filter(u=>u.visible).slice(...a?[O+1]:[0,O]).reduce((u,A)=>u+(A.height||0)+d,0)},[t]);return E(()=>{t.forEach(o=>{if(o.dismissed)C(o.id,o.removeDelay);else{let T=f.get(o.id);T&&(clearTimeout(T),f.delete(o.id))}})},[t]),{toasts:t,handlers:{updateHeight:w,startPause:N,endPause:n,calculateOffset:i}}};var ie=s;export{ie as default,m as resolveValue,s as toast,H as useToaster,g as useToasterStore};
//# sourceMappingURL=index.mjs.map

File diff suppressed because one or more lines are too long

102
frontend/node_modules/react-hot-toast/package.json generated vendored Normal file
View File

@@ -0,0 +1,102 @@
{
"name": "react-hot-toast",
"description": "Smoking hot React Notifications. Lightweight, customizable and beautiful by default.",
"version": "2.5.2",
"author": "Timo Lins",
"license": "MIT",
"repository": "timolins/react-hot-toast",
"keywords": [
"react",
"notifications",
"toast",
"snackbar"
],
"main": "dist/index.js",
"types": "dist/index.d.ts",
"exports": {
"./package.json": "./package.json",
".": {
"types": "./dist/index.d.ts",
"import": "./dist/index.mjs",
"require": "./dist/index.js"
},
"./headless": {
"types": "./headless/index.d.ts",
"import": "./headless/index.mjs",
"require": "./headless/index.js"
}
},
"files": [
"headless",
"dist",
"src"
],
"engines": {
"node": ">=10"
},
"husky": {
"hooks": {
"pre-commit": "prettier src --ignore-unknown --write"
}
},
"prettier": {
"printWidth": 80,
"semi": true,
"singleQuote": true,
"arrowParens": "always",
"trailingComma": "es5"
},
"size-limit": [
{
"path": "dist/index.js",
"limit": "5.5 KB"
},
{
"path": "dist/index.mjs",
"limit": "5 KB"
},
{
"path": "headless/index.js",
"limit": "2 KB"
},
{
"path": "headless/index.mjs",
"limit": "2 KB"
}
],
"devDependencies": {
"@jest/types": "^29.6.3",
"@size-limit/preset-small-lib": "^7.0.8",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^16.1.0",
"@types/jest": "^29.5.14",
"@types/react": "^18.3.18",
"@types/react-dom": "^18.3.5",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"prettier": "^2.8.8",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"size-limit": "^7.0.8",
"ts-jest": "^29.2.5",
"tslib": "^2.8.1",
"tsup": "^6.7.0",
"typescript": "^5.7.2"
},
"dependencies": {
"csstype": "^3.1.3",
"goober": "^2.1.16"
},
"peerDependencies": {
"react": ">=16",
"react-dom": ">=16"
},
"scripts": {
"start": "tsup --watch",
"build": "tsup",
"test": "jest --runInBand",
"setup": "pnpm i && cd site && pnpm i && cd .. && pnpm run link",
"link": "pnpm link ./site/node_modules/react && pnpm link ./site/node_modules/react-dom",
"size": "size-limit"
}
}

View File

@@ -0,0 +1,61 @@
import { styled, keyframes } from 'goober';
const circleAnimation = keyframes`
from {
transform: scale(0) rotate(45deg);
opacity: 0;
}
to {
transform: scale(1) rotate(45deg);
opacity: 1;
}`;
const checkmarkAnimation = keyframes`
0% {
height: 0;
width: 0;
opacity: 0;
}
40% {
height: 0;
width: 6px;
opacity: 1;
}
100% {
opacity: 1;
height: 10px;
}`;
export interface CheckmarkTheme {
primary?: string;
secondary?: string;
}
export const CheckmarkIcon = styled('div')<CheckmarkTheme>`
width: 20px;
opacity: 0;
height: 20px;
border-radius: 10px;
background: ${(p) => p.primary || '#61d345'};
position: relative;
transform: rotate(45deg);
animation: ${circleAnimation} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
forwards;
animation-delay: 100ms;
&:after {
content: '';
box-sizing: border-box;
animation: ${checkmarkAnimation} 0.2s ease-out forwards;
opacity: 0;
animation-delay: 200ms;
position: absolute;
border-right: 2px solid;
border-bottom: 2px solid;
border-color: ${(p) => p.secondary || '#fff'};
bottom: 6px;
left: 6px;
height: 10px;
width: 6px;
}
`;

View File

@@ -0,0 +1,71 @@
import { styled, keyframes } from 'goober';
const circleAnimation = keyframes`
from {
transform: scale(0) rotate(45deg);
opacity: 0;
}
to {
transform: scale(1) rotate(45deg);
opacity: 1;
}`;
const firstLineAnimation = keyframes`
from {
transform: scale(0);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}`;
const secondLineAnimation = keyframes`
from {
transform: scale(0) rotate(90deg);
opacity: 0;
}
to {
transform: scale(1) rotate(90deg);
opacity: 1;
}`;
export interface ErrorTheme {
primary?: string;
secondary?: string;
}
export const ErrorIcon = styled('div')<ErrorTheme>`
width: 20px;
opacity: 0;
height: 20px;
border-radius: 10px;
background: ${(p) => p.primary || '#ff4b4b'};
position: relative;
transform: rotate(45deg);
animation: ${circleAnimation} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
forwards;
animation-delay: 100ms;
&:after,
&:before {
content: '';
animation: ${firstLineAnimation} 0.15s ease-out forwards;
animation-delay: 150ms;
position: absolute;
border-radius: 3px;
opacity: 0;
background: ${(p) => p.secondary || '#fff'};
bottom: 9px;
left: 4px;
height: 2px;
width: 12px;
}
&:before {
animation: ${secondLineAnimation} 0.15s ease-out forwards;
animation-delay: 180ms;
transform: rotate(90deg);
}
`;

View File

@@ -0,0 +1,26 @@
import { styled, keyframes } from 'goober';
const rotate = keyframes`
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
`;
export interface LoaderTheme {
primary?: string;
secondary?: string;
}
export const LoaderIcon = styled('div')<LoaderTheme>`
width: 12px;
height: 12px;
box-sizing: border-box;
border: 2px solid;
border-radius: 100%;
border-color: ${(p) => p.secondary || '#e0e0e0'};
border-right-color: ${(p) => p.primary || '#616161'};
animation: ${rotate} 1s linear infinite;
`;

View File

@@ -0,0 +1,111 @@
import * as React from 'react';
import { styled, keyframes } from 'goober';
import { Toast, ToastPosition, resolveValue, Renderable } from '../core/types';
import { ToastIcon } from './toast-icon';
import { prefersReducedMotion } from '../core/utils';
const enterAnimation = (factor: number) => `
0% {transform: translate3d(0,${factor * -200}%,0) scale(.6); opacity:.5;}
100% {transform: translate3d(0,0,0) scale(1); opacity:1;}
`;
const exitAnimation = (factor: number) => `
0% {transform: translate3d(0,0,-1px) scale(1); opacity:1;}
100% {transform: translate3d(0,${factor * -150}%,-1px) scale(.6); opacity:0;}
`;
const fadeInAnimation = `0%{opacity:0;} 100%{opacity:1;}`;
const fadeOutAnimation = `0%{opacity:1;} 100%{opacity:0;}`;
const ToastBarBase = styled('div')`
display: flex;
align-items: center;
background: #fff;
color: #363636;
line-height: 1.3;
will-change: transform;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05);
max-width: 350px;
pointer-events: auto;
padding: 8px 10px;
border-radius: 8px;
`;
const Message = styled('div')`
display: flex;
justify-content: center;
margin: 4px 10px;
color: inherit;
flex: 1 1 auto;
white-space: pre-line;
`;
interface ToastBarProps {
toast: Toast;
position?: ToastPosition;
style?: React.CSSProperties;
children?: (components: {
icon: Renderable;
message: Renderable;
}) => Renderable;
}
const getAnimationStyle = (
position: ToastPosition,
visible: boolean
): React.CSSProperties => {
const top = position.includes('top');
const factor = top ? 1 : -1;
const [enter, exit] = prefersReducedMotion()
? [fadeInAnimation, fadeOutAnimation]
: [enterAnimation(factor), exitAnimation(factor)];
return {
animation: visible
? `${keyframes(enter)} 0.35s cubic-bezier(.21,1.02,.73,1) forwards`
: `${keyframes(exit)} 0.4s forwards cubic-bezier(.06,.71,.55,1)`,
};
};
export const ToastBar: React.FC<ToastBarProps> = React.memo(
({ toast, position, style, children }) => {
const animationStyle: React.CSSProperties = toast.height
? getAnimationStyle(
toast.position || position || 'top-center',
toast.visible
)
: { opacity: 0 };
const icon = <ToastIcon toast={toast} />;
const message = (
<Message {...toast.ariaProps}>
{resolveValue(toast.message, toast)}
</Message>
);
return (
<ToastBarBase
className={toast.className}
style={{
...animationStyle,
...style,
...toast.style,
}}
>
{typeof children === 'function' ? (
children({
icon,
message,
})
) : (
<>
{icon}
{message}
</>
)}
</ToastBarBase>
);
}
);

View File

@@ -0,0 +1,77 @@
import * as React from 'react';
import { styled, keyframes } from 'goober';
import { Toast } from '../core/types';
import { ErrorIcon, ErrorTheme } from './error';
import { LoaderIcon, LoaderTheme } from './loader';
import { CheckmarkIcon, CheckmarkTheme } from './checkmark';
const StatusWrapper = styled('div')`
position: absolute;
`;
const IndicatorWrapper = styled('div')`
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-width: 20px;
min-height: 20px;
`;
const enter = keyframes`
from {
transform: scale(0.6);
opacity: 0.4;
}
to {
transform: scale(1);
opacity: 1;
}`;
export const AnimatedIconWrapper = styled('div')`
position: relative;
transform: scale(0.6);
opacity: 0.4;
min-width: 20px;
animation: ${enter} 0.3s 0.12s cubic-bezier(0.175, 0.885, 0.32, 1.275)
forwards;
`;
export type IconThemes = Partial<{
success: CheckmarkTheme;
error: ErrorTheme;
loading: LoaderTheme;
}>;
export const ToastIcon: React.FC<{
toast: Toast;
}> = ({ toast }) => {
const { icon, type, iconTheme } = toast;
if (icon !== undefined) {
if (typeof icon === 'string') {
return <AnimatedIconWrapper>{icon}</AnimatedIconWrapper>;
} else {
return icon;
}
}
if (type === 'blank') {
return null;
}
return (
<IndicatorWrapper>
<LoaderIcon {...iconTheme} />
{type !== 'loading' && (
<StatusWrapper>
{type === 'error' ? (
<ErrorIcon {...iconTheme} />
) : (
<CheckmarkIcon {...iconTheme} />
)}
</StatusWrapper>
)}
</IndicatorWrapper>
);
};

View File

@@ -0,0 +1,142 @@
import { css, setup } from 'goober';
import * as React from 'react';
import {
resolveValue,
ToasterProps,
ToastPosition,
ToastWrapperProps,
} from '../core/types';
import { useToaster } from '../core/use-toaster';
import { prefersReducedMotion } from '../core/utils';
import { ToastBar } from './toast-bar';
setup(React.createElement);
const ToastWrapper = ({
id,
className,
style,
onHeightUpdate,
children,
}: ToastWrapperProps) => {
const ref = React.useCallback(
(el: HTMLElement | null) => {
if (el) {
const updateHeight = () => {
const height = el.getBoundingClientRect().height;
onHeightUpdate(id, height);
};
updateHeight();
new MutationObserver(updateHeight).observe(el, {
subtree: true,
childList: true,
characterData: true,
});
}
},
[id, onHeightUpdate]
);
return (
<div ref={ref} className={className} style={style}>
{children}
</div>
);
};
const getPositionStyle = (
position: ToastPosition,
offset: number
): React.CSSProperties => {
const top = position.includes('top');
const verticalStyle: React.CSSProperties = top ? { top: 0 } : { bottom: 0 };
const horizontalStyle: React.CSSProperties = position.includes('center')
? {
justifyContent: 'center',
}
: position.includes('right')
? {
justifyContent: 'flex-end',
}
: {};
return {
left: 0,
right: 0,
display: 'flex',
position: 'absolute',
transition: prefersReducedMotion()
? undefined
: `all 230ms cubic-bezier(.21,1.02,.73,1)`,
transform: `translateY(${offset * (top ? 1 : -1)}px)`,
...verticalStyle,
...horizontalStyle,
};
};
const activeClass = css`
z-index: 9999;
> * {
pointer-events: auto;
}
`;
const DEFAULT_OFFSET = 16;
export const Toaster: React.FC<ToasterProps> = ({
reverseOrder,
position = 'top-center',
toastOptions,
gutter,
children,
containerStyle,
containerClassName,
}) => {
const { toasts, handlers } = useToaster(toastOptions);
return (
<div
id="_rht_toaster"
style={{
position: 'fixed',
zIndex: 9999,
top: DEFAULT_OFFSET,
left: DEFAULT_OFFSET,
right: DEFAULT_OFFSET,
bottom: DEFAULT_OFFSET,
pointerEvents: 'none',
...containerStyle,
}}
className={containerClassName}
onMouseEnter={handlers.startPause}
onMouseLeave={handlers.endPause}
>
{toasts.map((t) => {
const toastPosition = t.position || position;
const offset = handlers.calculateOffset(t, {
reverseOrder,
gutter,
defaultPosition: position,
});
const positionStyle = getPositionStyle(toastPosition, offset);
return (
<ToastWrapper
id={t.id}
key={t.id}
onHeightUpdate={handlers.updateHeight}
className={t.visible ? activeClass : ''}
style={positionStyle}
>
{t.type === 'custom' ? (
resolveValue(t.message, t)
) : children ? (
children(t)
) : (
<ToastBar toast={t} position={toastPosition} />
)}
</ToastWrapper>
);
})}
</div>
);
};

186
frontend/node_modules/react-hot-toast/src/core/store.ts generated vendored Normal file
View File

@@ -0,0 +1,186 @@
import { useEffect, useState, useRef } from 'react';
import { DefaultToastOptions, Toast, ToastType } from './types';
const TOAST_LIMIT = 20;
export enum ActionType {
ADD_TOAST,
UPDATE_TOAST,
UPSERT_TOAST,
DISMISS_TOAST,
REMOVE_TOAST,
START_PAUSE,
END_PAUSE,
}
type Action =
| {
type: ActionType.ADD_TOAST;
toast: Toast;
}
| {
type: ActionType.UPSERT_TOAST;
toast: Toast;
}
| {
type: ActionType.UPDATE_TOAST;
toast: Partial<Toast>;
}
| {
type: ActionType.DISMISS_TOAST;
toastId?: string;
}
| {
type: ActionType.REMOVE_TOAST;
toastId?: string;
}
| {
type: ActionType.START_PAUSE;
time: number;
}
| {
type: ActionType.END_PAUSE;
time: number;
};
interface State {
toasts: Toast[];
pausedAt: number | undefined;
}
export const reducer = (state: State, action: Action): State => {
switch (action.type) {
case ActionType.ADD_TOAST:
return {
...state,
toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
};
case ActionType.UPDATE_TOAST:
return {
...state,
toasts: state.toasts.map((t) =>
t.id === action.toast.id ? { ...t, ...action.toast } : t
),
};
case ActionType.UPSERT_TOAST:
const { toast } = action;
return reducer(state, {
type: state.toasts.find((t) => t.id === toast.id)
? ActionType.UPDATE_TOAST
: ActionType.ADD_TOAST,
toast,
});
case ActionType.DISMISS_TOAST:
const { toastId } = action;
return {
...state,
toasts: state.toasts.map((t) =>
t.id === toastId || toastId === undefined
? {
...t,
dismissed: true,
visible: false,
}
: t
),
};
case ActionType.REMOVE_TOAST:
if (action.toastId === undefined) {
return {
...state,
toasts: [],
};
}
return {
...state,
toasts: state.toasts.filter((t) => t.id !== action.toastId),
};
case ActionType.START_PAUSE:
return {
...state,
pausedAt: action.time,
};
case ActionType.END_PAUSE:
const diff = action.time - (state.pausedAt || 0);
return {
...state,
pausedAt: undefined,
toasts: state.toasts.map((t) => ({
...t,
pauseDuration: t.pauseDuration + diff,
})),
};
}
};
const listeners: Array<(state: State) => void> = [];
let memoryState: State = { toasts: [], pausedAt: undefined };
export const dispatch = (action: Action) => {
memoryState = reducer(memoryState, action);
listeners.forEach((listener) => {
listener(memoryState);
});
};
export const defaultTimeouts: {
[key in ToastType]: number;
} = {
blank: 4000,
error: 4000,
success: 2000,
loading: Infinity,
custom: 4000,
};
export const useStore = (toastOptions: DefaultToastOptions = {}): State => {
const [state, setState] = useState<State>(memoryState);
const initial = useRef(memoryState);
// TODO: Switch to useSyncExternalStore when targeting React 18+
useEffect(() => {
if (initial.current !== memoryState) {
setState(memoryState);
}
listeners.push(setState);
return () => {
const index = listeners.indexOf(setState);
if (index > -1) {
listeners.splice(index, 1);
}
};
}, []);
const mergedToasts = state.toasts.map((t) => ({
...toastOptions,
...toastOptions[t.type],
...t,
removeDelay:
t.removeDelay ||
toastOptions[t.type]?.removeDelay ||
toastOptions?.removeDelay,
duration:
t.duration ||
toastOptions[t.type]?.duration ||
toastOptions?.duration ||
defaultTimeouts[t.type],
style: {
...toastOptions.style,
...toastOptions[t.type]?.style,
...t.style,
},
}));
return {
...state,
toasts: mergedToasts,
};
};

111
frontend/node_modules/react-hot-toast/src/core/toast.ts generated vendored Normal file
View File

@@ -0,0 +1,111 @@
import {
Renderable,
Toast,
ToastOptions,
ToastType,
DefaultToastOptions,
ValueOrFunction,
resolveValue,
} from './types';
import { genId } from './utils';
import { dispatch, ActionType } from './store';
type Message = ValueOrFunction<Renderable, Toast>;
type ToastHandler = (message: Message, options?: ToastOptions) => string;
const createToast = (
message: Message,
type: ToastType = 'blank',
opts?: ToastOptions
): Toast => ({
createdAt: Date.now(),
visible: true,
dismissed: false,
type,
ariaProps: {
role: 'status',
'aria-live': 'polite',
},
message,
pauseDuration: 0,
...opts,
id: opts?.id || genId(),
});
const createHandler =
(type?: ToastType): ToastHandler =>
(message, options) => {
const toast = createToast(message, type, options);
dispatch({ type: ActionType.UPSERT_TOAST, toast });
return toast.id;
};
const toast = (message: Message, opts?: ToastOptions) =>
createHandler('blank')(message, opts);
toast.error = createHandler('error');
toast.success = createHandler('success');
toast.loading = createHandler('loading');
toast.custom = createHandler('custom');
toast.dismiss = (toastId?: string) => {
dispatch({
type: ActionType.DISMISS_TOAST,
toastId,
});
};
toast.remove = (toastId?: string) =>
dispatch({ type: ActionType.REMOVE_TOAST, toastId });
toast.promise = <T>(
promise: Promise<T> | (() => Promise<T>),
msgs: {
loading: Renderable;
success?: ValueOrFunction<Renderable, T>;
error?: ValueOrFunction<Renderable, any>;
},
opts?: DefaultToastOptions
) => {
const id = toast.loading(msgs.loading, { ...opts, ...opts?.loading });
if (typeof promise === 'function') {
promise = promise();
}
promise
.then((p) => {
const successMessage = msgs.success
? resolveValue(msgs.success, p)
: undefined;
if (successMessage) {
toast.success(successMessage, {
id,
...opts,
...opts?.success,
});
} else {
toast.dismiss(id);
}
return p;
})
.catch((e) => {
const errorMessage = msgs.error ? resolveValue(msgs.error, e) : undefined;
if (errorMessage) {
toast.error(errorMessage, {
id,
...opts,
...opts?.error,
});
} else {
toast.dismiss(id);
}
});
return promise;
};
export { toast };

View File

@@ -0,0 +1,94 @@
import { CSSProperties } from 'react';
export type ToastType = 'success' | 'error' | 'loading' | 'blank' | 'custom';
export type ToastPosition =
| 'top-left'
| 'top-center'
| 'top-right'
| 'bottom-left'
| 'bottom-center'
| 'bottom-right';
export type Renderable = React.ReactElement | string | null;
export interface IconTheme {
primary: string;
secondary: string;
}
export type ValueFunction<TValue, TArg> = (arg: TArg) => TValue;
export type ValueOrFunction<TValue, TArg> =
| TValue
| ValueFunction<TValue, TArg>;
const isFunction = <TValue, TArg>(
valOrFunction: ValueOrFunction<TValue, TArg>
): valOrFunction is ValueFunction<TValue, TArg> =>
typeof valOrFunction === 'function';
export const resolveValue = <TValue, TArg>(
valOrFunction: ValueOrFunction<TValue, TArg>,
arg: TArg
): TValue => (isFunction(valOrFunction) ? valOrFunction(arg) : valOrFunction);
export interface Toast {
type: ToastType;
id: string;
message: ValueOrFunction<Renderable, Toast>;
icon?: Renderable;
duration?: number;
pauseDuration: number;
position?: ToastPosition;
removeDelay?: number;
ariaProps: {
role: 'status' | 'alert';
'aria-live': 'assertive' | 'off' | 'polite';
};
style?: CSSProperties;
className?: string;
iconTheme?: IconTheme;
createdAt: number;
visible: boolean;
dismissed: boolean;
height?: number;
}
export type ToastOptions = Partial<
Pick<
Toast,
| 'id'
| 'icon'
| 'duration'
| 'ariaProps'
| 'className'
| 'style'
| 'position'
| 'iconTheme'
| 'removeDelay'
>
>;
export type DefaultToastOptions = ToastOptions & {
[key in ToastType]?: ToastOptions;
};
export interface ToasterProps {
position?: ToastPosition;
toastOptions?: DefaultToastOptions;
reverseOrder?: boolean;
gutter?: number;
containerStyle?: React.CSSProperties;
containerClassName?: string;
children?: (toast: Toast) => React.ReactElement;
}
export interface ToastWrapperProps {
id: string;
className?: string;
style?: React.CSSProperties;
onHeightUpdate: (id: string, height: number) => void;
children?: React.ReactNode;
}

View File

@@ -0,0 +1,132 @@
import { useEffect, useCallback } from 'react';
import { dispatch, ActionType, useStore } from './store';
import { toast } from './toast';
import { DefaultToastOptions, Toast, ToastPosition } from './types';
const updateHeight = (toastId: string, height: number) => {
dispatch({
type: ActionType.UPDATE_TOAST,
toast: { id: toastId, height },
});
};
const startPause = () => {
dispatch({
type: ActionType.START_PAUSE,
time: Date.now(),
});
};
const toastTimeouts = new Map<Toast['id'], ReturnType<typeof setTimeout>>();
export const REMOVE_DELAY = 1000;
const addToRemoveQueue = (toastId: string, removeDelay = REMOVE_DELAY) => {
if (toastTimeouts.has(toastId)) {
return;
}
const timeout = setTimeout(() => {
toastTimeouts.delete(toastId);
dispatch({
type: ActionType.REMOVE_TOAST,
toastId: toastId,
});
}, removeDelay);
toastTimeouts.set(toastId, timeout);
};
export const useToaster = (toastOptions?: DefaultToastOptions) => {
const { toasts, pausedAt } = useStore(toastOptions);
useEffect(() => {
if (pausedAt) {
return;
}
const now = Date.now();
const timeouts = toasts.map((t) => {
if (t.duration === Infinity) {
return;
}
const durationLeft =
(t.duration || 0) + t.pauseDuration - (now - t.createdAt);
if (durationLeft < 0) {
if (t.visible) {
toast.dismiss(t.id);
}
return;
}
return setTimeout(() => toast.dismiss(t.id), durationLeft);
});
return () => {
timeouts.forEach((timeout) => timeout && clearTimeout(timeout));
};
}, [toasts, pausedAt]);
const endPause = useCallback(() => {
if (pausedAt) {
dispatch({ type: ActionType.END_PAUSE, time: Date.now() });
}
}, [pausedAt]);
const calculateOffset = useCallback(
(
toast: Toast,
opts?: {
reverseOrder?: boolean;
gutter?: number;
defaultPosition?: ToastPosition;
}
) => {
const { reverseOrder = false, gutter = 8, defaultPosition } = opts || {};
const relevantToasts = toasts.filter(
(t) =>
(t.position || defaultPosition) ===
(toast.position || defaultPosition) && t.height
);
const toastIndex = relevantToasts.findIndex((t) => t.id === toast.id);
const toastsBefore = relevantToasts.filter(
(toast, i) => i < toastIndex && toast.visible
).length;
const offset = relevantToasts
.filter((t) => t.visible)
.slice(...(reverseOrder ? [toastsBefore + 1] : [0, toastsBefore]))
.reduce((acc, t) => acc + (t.height || 0) + gutter, 0);
return offset;
},
[toasts]
);
useEffect(() => {
// Add dismissed toasts to remove queue
toasts.forEach((toast) => {
if (toast.dismissed) {
addToRemoveQueue(toast.id, toast.removeDelay);
} else {
// If toast becomes visible again, remove it from the queue
const timeout = toastTimeouts.get(toast.id);
if (timeout) {
clearTimeout(timeout);
toastTimeouts.delete(toast.id);
}
}
});
}, [toasts]);
return {
toasts,
handlers: {
updateHeight,
startPause,
endPause,
calculateOffset,
},
};
};

View File

@@ -0,0 +1,19 @@
export const genId = (() => {
let count = 0;
return () => {
return (++count).toString();
};
})();
export const prefersReducedMotion = (() => {
// Cache result
let shouldReduceMotion: boolean | undefined = undefined;
return () => {
if (shouldReduceMotion === undefined && typeof window !== 'undefined') {
const mediaQuery = matchMedia('(prefers-reduced-motion: reduce)');
shouldReduceMotion = !mediaQuery || mediaQuery.matches;
}
return shouldReduceMotion;
};
})();

View File

@@ -0,0 +1,21 @@
import { toast } from '../core/toast';
export type {
DefaultToastOptions,
IconTheme,
Renderable,
Toast,
ToasterProps,
ToastOptions,
ToastPosition,
ToastType,
ValueFunction,
ValueOrFunction,
} from '../core/types';
export { resolveValue } from '../core/types';
export { useToaster } from '../core/use-toaster';
export { useStore as useToasterStore } from '../core/store';
export { toast };
export default toast;

13
frontend/node_modules/react-hot-toast/src/index.ts generated vendored Normal file
View File

@@ -0,0 +1,13 @@
import { toast } from './core/toast';
export * from './headless';
export { ToastBar } from './components/toast-bar';
export { ToastIcon } from './components/toast-icon';
export { Toaster } from './components/toaster';
export { CheckmarkIcon } from './components/checkmark';
export { ErrorIcon } from './components/error';
export { LoaderIcon } from './components/loader';
export { toast };
export default toast;