temp6

thunderstore-io · Nov 9, 2023 · 7e454e2 · 7e454e2
1 parent 0adde7a
commit 7e454e2
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 116 deletions.
diff --git a/packages/cyberstorm/src/components/Forms/CreateTeamForm/CreateTeamForm.tsx b/packages/cyberstorm/src/components/Forms/CreateTeamForm/CreateTeamForm.tsx
@@ -60,7 +60,7 @@ export function CreateTeamForm() {
         "danger",
         <FontAwesomeIcon icon={faOctagonExclamation} />,
         "Team name cannot start or end with underscore.",
-        true
+        30000
       );
     } else if (
       errors.teamName &&
@@ -70,14 +70,14 @@ export function CreateTeamForm() {
         "danger",
         <FontAwesomeIcon icon={faOctagonExclamation} />,
         "Team name can contain the following characters: a-z A-Z 0-9 _",
-        true
+        30000
       );
     } else if (errors.teamName && errors.teamName.type === "required") {
       toast?.addToast(
         "danger",
         <FontAwesomeIcon icon={faOctagonExclamation} />,
         "Team name is required",
-        true
+        30000
       );
     }
   }

diff --git a/packages/cyberstorm/src/components/NewToast/NewToast.module.css b/packages/cyberstorm/src/components/NewToast/NewToast.module.css
@@ -27,6 +27,34 @@
   padding: 1rem 3.25rem calc(1rem - 0.125rem) 1.5rem;
 }
 
+.closeIconWrapper {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  background-color: transparent;
+}
+
+.closeIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1em;
+  height: 1em;
+  color: var(--color-text--tertiary);
+}
+
+.toastProgress {
+  width: 100%;
+  height: 0.125rem;
+  background-color: rgb(0 0 0 / 0.3);
+}
+
+.toastProgressBar {
+  height: 100%;
+  background-color: var(--feature-color);
+  animation: progress-bar var(--bar-timer) linear forwards;
+}
+
 /* Styles for Toast's text */
 .message {
   display: flex;
@@ -70,35 +98,6 @@
   --text-color: var(--alert-danger-text-color);
 }
 
-.closeIconWrapper {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-}
-
-.closeIcon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.875rem;
-  height: 1.875rem;
-}
-
-.toastProgress {
-  width: 100%;
-  height: 0.125rem;
-  background-color: rgb(0 0 0 / 0.3);
-}
-
-.toastProgressBar {
-  height: 100%;
-  background-color: var(--feature-color);
-}
-
-.toastProgressBarTimer {
-  animation: progress-bar 10s linear forwards;
-}
-
 @keyframes progress-bar {
   0% {
     width: 100%;
@@ -109,40 +108,74 @@
   }
 }
 
+/* CSS for the Toast container */
 .toastContainer {
+  --viewport-padding: 25px;
+
   position: fixed;
-  bottom: 1rem;
-  left: 1rem;
-  z-index: 9999;
+  bottom: 0;
+  left: 0;
+  z-index: 2147483647;
   display: flex;
   flex-direction: column;
-  row-gap: 1rem;
+  gap: 10px;
+  width: 390px;
+  max-width: 100vw;
+  margin: 0;
+  padding: var(--viewport-padding);
+  list-style: none;
+  outline: none;
+
+  --radix-toast-swipe-end-x: -25px;
+}
+
+.root[data-state="open"] {
+  animation: slide-in 600ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-.rootFadeIn {
-  animation: fadein 0.3s linear forwards;
+.root[data-state="closed"] {
+  animation: hide 200ms ease-in;
 }
 
-.rootFadeOut {
-  animation: fadeout 0.3s linear forwards;
+.root[data-swipe="move"] {
+  transform: translateX(var(--radix-toast-swipe-move-x));
 }
 
-@keyframes fadein {
-  0% { opacity: 0; }
-  100% { opacity: 1; }
+.root[data-swipe="cancel"] {
+  transform: translateX(0);
+  transition: transform 200ms ease-out;
 }
 
-@keyframes fadein {
-  0% { opacity: 0; }
-  100% { opacity: 1; }
+.root[data-swipe="end"] {
+  animation: swipe-out 600ms ease-out;
 }
 
-@keyframes fadeout {
-  0% { opacity: 1; }
-  100% { opacity: 0; }
+@keyframes hide {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
 }
 
-@keyframes fadeout {
-  0% { opacity: 1; }
-  100% { opacity: 0; }
+@keyframes slide-in {
+  from {
+    transform: translateX(calc(-100% - var(--viewport-padding)));
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes swipe-out {
+  from {
+    transform: translateX(var(--radix-toast-swipe-end-x));
+  }
+
+  to {
+    transform: translateX(calc(-100% - var(--viewport-padding)));
+  }
 }
diff --git a/packages/cyberstorm/src/components/NewToast/NewToast.tsx b/packages/cyberstorm/src/components/NewToast/NewToast.tsx
@@ -1,57 +1,31 @@
 "use client";
-import React, { ReactNode, useContext, useState } from "react";
+import React, { CSSProperties, ReactNode } from "react";
 import styles from "./NewToast.module.css";
 import { Icon } from "../Icon/Icon";
 import { classnames } from "../../utils/utils";
-import { Button } from "../..";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faXmarkLarge } from "@fortawesome/pro-solid-svg-icons";
-import { ToastContext } from "./NewToastContext";
 import * as RadixToast from "@radix-ui/react-toast";
 
 type _ToastProps = {
   id: string;
   content: ReactNode;
   icon?: JSX.Element;
   variant?: "info" | "danger" | "warning" | "success";
-  noTimer?: boolean;
+  timer?: number;
 };
 export type ToastProps = _ToastProps &
   Omit<React.HTMLProps<HTMLDivElement>, keyof _ToastProps>;
 
 export function Toast(props: ToastProps) {
-  const { id, content, icon, variant = "info", noTimer = false } = props;
-  const useToast = () => useContext(ToastContext);
-  const toast = useToast();
-  const [isFadingOut, setIsFadingOut] = useState(false);
-  const [isFadingIn, setIsFadingIn] = useState(true);
-
-  // Fade in
-  setTimeout(() => setIsFadingIn(false), 300);
-
-  const removeToast = () => {
-    toast?.remove(id);
-    setIsFadingOut(false);
-  };
-  const fadeOut = () => {
-    setIsFadingOut(true);
-    setTimeout(() => removeToast(), 300);
-  };
-
-  // Auto remove after 10 seconds
-  if (!noTimer) {
-    setTimeout(() => fadeOut(), 10000);
-  }
+  const { content, icon, variant = "info", timer = 10000 } = props;
+  const timerCSS = {
+    "--bar-timer": `${timer / 1000}s`,
+  } as CSSProperties;
 
   return (
-    <RadixToast.Root asChild>
-      <div
-        className={classnames(
-          styles.root,
-          isFadingOut ? styles.rootFadeOut : null,
-          isFadingIn ? styles.rootFadeIn : null
-        )}
-      >
+    <RadixToast.Root asChild duration={timer}>
+      <div className={classnames(styles.root)}>
         <div className={classnames(styles.contentWrapper, getStyle(variant))}>
           <RadixToast.Description asChild>
             <div className={styles.content}>
@@ -60,27 +34,12 @@ export function Toast(props: ToastProps) {
             </div>
           </RadixToast.Description>
           <div className={styles.toastProgress}>
-            <div
-              className={classnames(
-                styles.toastProgressBar,
-                noTimer ? null : styles.toastProgressBarTimer
-              )}
-            />
+            <div className={styles.toastProgressBar} style={timerCSS} />
           </div>
-          <RadixToast.Close asChild>
-            <div
-              className={classnames(styles.closeIcon, styles.closeIconWrapper)}
-            >
-              <Button.Root
-                colorScheme="transparentNoBackground"
-                paddingSize="none"
-                onClick={fadeOut}
-              >
-                <Button.ButtonIcon>
-                  <FontAwesomeIcon icon={faXmarkLarge} />
-                </Button.ButtonIcon>
-              </Button.Root>
-            </div>
+          <RadixToast.Close className={styles.closeIconWrapper}>
+            <Icon iconClasses={styles.closeIcon}>
+              <FontAwesomeIcon icon={faXmarkLarge} />
+            </Icon>
           </RadixToast.Close>
         </div>
       </div>

diff --git a/packages/cyberstorm/src/components/NewToast/NewToastContainer.tsx b/packages/cyberstorm/src/components/NewToast/NewToastContainer.tsx
@@ -9,7 +9,7 @@ export function ToastContainer(props: {
     variant?: "info" | "danger" | "warning" | "success";
     icon?: JSX.Element;
     message?: string;
-    noTimer?: boolean;
+    timer?: number;
   }[];
 }) {
   const { toasts } = props;
@@ -24,7 +24,7 @@ export function ToastContainer(props: {
             icon={toast.icon}
             content={toast.message}
             variant={toast.variant}
-            noTimer={toast.noTimer}
+            timer={toast.timer}
           />
         ))}
       </div>

diff --git a/packages/cyberstorm/src/components/NewToast/NewToastContext.tsx b/packages/cyberstorm/src/components/NewToast/NewToastContext.tsx
@@ -9,7 +9,7 @@ const initState: {
     variant?: "info" | "danger" | "warning" | "success";
     icon?: JSX.Element;
     message?: string;
-    noTimer?: boolean;
+    timer?: number;
   }[];
 } = { toasts: [] };
 
@@ -20,7 +20,7 @@ const toastReducer = (
       variant?: "info" | "danger" | "warning" | "success";
       icon?: JSX.Element;
       message?: string;
-      noTimer?: boolean;
+      timer?: number;
     }[];
   },
   action: {
@@ -30,7 +30,7 @@ const toastReducer = (
       variant?: "info" | "danger" | "warning" | "success";
       icon?: JSX.Element;
       message?: string;
-      noTimer?: boolean;
+      timer?: number;
     };
   }
 ) => {
@@ -58,7 +58,7 @@ interface ContextInterface {
     variant?: "info" | "danger" | "warning" | "success",
     icon?: JSX.Element,
     message?: string,
-    noTimer?: boolean
+    timer?: number
   ) => void;
   remove: (id: string) => void;
 }
@@ -72,10 +72,10 @@ export function ToastProvider(props: PropsWithChildren) {
     variant?: "info" | "danger" | "warning" | "success",
     icon?: JSX.Element,
     message?: string,
-    noTimer?: boolean
+    timer?: number
   ) => {
     const id = uuid();
-    dispatch({ type: "add", toast: { id, variant, icon, message, noTimer } });
+    dispatch({ type: "add", toast: { id, variant, icon, message, timer } });
   };
 
   const remove = (id: string) => {
@@ -89,7 +89,7 @@ export function ToastProvider(props: PropsWithChildren) {
 
   return (
     <ToastContext.Provider value={value}>
-      <RadixToast.Provider>
+      <RadixToast.Provider swipeDirection="left" duration={10000}>
         {props.children}
         <ToastContainer toasts={state.toasts} />
       </RadixToast.Provider>

diff --git a/packages/cyberstorm/src/components/Providers.tsx b/packages/cyberstorm/src/components/Providers.tsx
@@ -1,7 +1,7 @@
 "use client";
 import * as RadixTooltip from "@radix-ui/react-tooltip";
 import { ReactNode } from "react";
-import { ToastProvider } from "./Toast/ToastContext";
+import { ToastProvider } from "./NewToast/NewToastContext";
 
 interface CyberstormProvidersProps {
   children: ReactNode | ReactNode[];