Toast Component Wip

components/core/Layout/Layout.tsx

@@ -4,7 +4,7 @@ import { useRouter } from 'next/router'
 import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
 import { CommerceProvider } from '@lib/bigcommerce'
 import { CartSidebarView } from '@components/cart'
-import { Container, Sidebar, Button, Modal } from '@components/ui'
+import { Container, Sidebar, Button, Modal, Toast } from '@components/ui'
 import { Navbar, Featurebar, Footer } from '@components/core'
 import { LoginView, SignUpView } from '@components/auth'
 import { useUI } from '@components/ui/context'
@@ -24,6 +24,9 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
     closeSidebar,
     closeModal,
     modalView,
+    toastText,
+    closeToast,
+    displayToast,
   } = useUI()
   const [acceptedCookies, setAcceptedCookies] = useState(false)
   const [hasScrolled, setHasScrolled] = useState(false)
@@ -67,6 +70,7 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
         <Sidebar open={displaySidebar} onClose={closeSidebar}>
           <CartSidebarView />
         </Sidebar>
+
         <Modal open={displayModal} onClose={closeModal}>
           {modalView === 'LOGIN_VIEW' && <LoginView />}
           {modalView === 'SIGNUP_VIEW' && <SignUpView />}
@@ -81,6 +85,9 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
             </Button>
           }
         />
+        {/* <Toast open={displayToast} onClose={closeModal}>
+          {toastText}
+        </Toast> */}
       </div>
     </CommerceProvider>
   )

components/ui/Toast/Toast.module.css

@@ -0,0 +1,9 @@
+.root {
+}
+
+.toast {
+  @apply absolute bg-primary text-primary flex items-center border border-accents-1
+   rounded-md z-50 shadow-2xl top-0 right-0 p-6 my-6 mx-3;
+  width: 420px;
+  z-index: 20000;
+}

components/ui/Toast/Toast.tsx

@@ -0,0 +1,73 @@
+import cn from 'classnames'
+import { FC, useRef, useEffect, useCallback } from 'react'
+import s from './Toast.module.css'
+import { useDialog } from '@react-aria/dialog'
+import { FocusScope } from '@react-aria/focus'
+import { Transition } from '@headlessui/react'
+import { useOverlay, useModal, OverlayContainer } from '@react-aria/overlays'
+
+interface Props {
+  className?: string
+  children?: any
+  open?: boolean
+  onClose: () => void
+}
+
+const Toast: FC<Props> = ({
+  className,
+  children,
+  open = false,
+  onClose,
+  ...props
+}) => {
+  const rootClassName = cn(s.root, className)
+  let ref = useRef() as React.MutableRefObject<HTMLInputElement>
+  let { modalProps } = useModal()
+  let { dialogProps } = useDialog({}, ref)
+  let { overlayProps } = useOverlay(
+    {
+      isOpen: open,
+      isDismissable: true,
+      onClose: onClose,
+      ...props,
+    },
+    ref
+  )
+
+  // useEffect(() => {
+  //   setTimeout(() => {
+  //     useCallback(onClose, [])
+  //   }, 400)
+  // })
+
+  return (
+    <Transition show={open}>
+      <OverlayContainer>
+        <FocusScope contain restoreFocus autoFocus>
+          <div className={rootClassName}>
+            <Transition.Child
+              enter="transition-opacity ease-linear duration-300"
+              enterFrom="opacity-0"
+              enterTo="opacity-100"
+              leave="transition-opacity ease-linear duration-300"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+            >
+              <div
+                className={s.toast}
+                {...overlayProps}
+                {...dialogProps}
+                {...modalProps}
+                ref={ref}
+              >
+                {children}
+              </div>
+            </Transition.Child>
+          </div>
+        </FocusScope>
+      </OverlayContainer>
+    </Transition>
+  )
+}
+
+export default Toast

components/ui/Toast/index.ts

@@ -0,0 +1 @@
+export { default } from './Toast'

components/ui/context.tsx

@@ -6,7 +6,9 @@ export interface State {
   displaySidebar: boolean
   displayDropdown: boolean
   displayModal: boolean
+  displayToast: boolean
   modalView: string
+  toastText: string
 }
 
 const initialState = {
@@ -14,6 +16,8 @@ const initialState = {
   displayDropdown: false,
   displayModal: false,
   modalView: 'LOGIN_VIEW',
+  displayToast: false,
+  toastText: 'HOLAAAA',
 }
 
 type Action =
@@ -23,6 +27,16 @@ type Action =
   | {
       type: 'CLOSE_SIDEBAR'
     }
+  | {
+      type: 'OPEN_TOAST'
+    }
+  | {
+      type: 'CLOSE_TOAST'
+    }
+  | {
+      type: 'SET_TOAST_TEXT'
+      text: ToastText
+    }
   | {
       type: 'OPEN_DROPDOWN'
     }
@@ -45,6 +59,7 @@ type Action =
     }
 
 type MODAL_VIEWS = 'SIGNUP_VIEW' | 'LOGIN_VIEW'
+type ToastText = string
 
 export const UIContext = React.createContext<State | any>(initialState)
 
@@ -88,12 +103,30 @@ function uiReducer(state: State, action: Action) {
         displayModal: false,
       }
     }
+    case 'OPEN_TOAST': {
+      return {
+        ...state,
+        displayToast: true,
+      }
+    }
+    case 'CLOSE_TOAST': {
+      return {
+        ...state,
+        displayToast: false,
+      }
+    }
     case 'SET_MODAL_VIEW': {
       return {
         ...state,
         modalView: action.view,
       }
     }
+    case 'SET_TOAST_TEXT': {
+      return {
+        ...state,
+        toastText: action.text,
+      }
+    }
   }
 }
 
@@ -109,6 +142,9 @@ export const UIProvider: FC = (props) => {
   const openModal = () => dispatch({ type: 'OPEN_MODAL' })
   const closeModal = () => dispatch({ type: 'CLOSE_MODAL' })
 
+  const openToast = () => dispatch({ type: 'OPEN_TOAST' })
+  const closeToast = () => dispatch({ type: 'CLOSE_TOAST' })
+
   const setModalView = (view: MODAL_VIEWS) =>
     dispatch({ type: 'SET_MODAL_VIEW', view })
 
@@ -121,8 +157,14 @@ export const UIProvider: FC = (props) => {
     openModal,
     closeModal,
     setModalView,
+    openToast,
+    closeToast,
   }
 
+  setTimeout(() => {
+    openToast()
+  }, 200)
+
   return <UIContext.Provider value={value} {...props} />
 }
 

components/ui/index.ts

@@ -10,3 +10,4 @@ export { default as Skeleton } from './Skeleton'
 export { default as Modal } from './Modal'
 export { default as Text } from './Text'
 export { default as Input } from './Input'
+export { default as Toast } from './Toast'