Removing HeadlessUI and React-Aria

components/ui/Button/Button.tsx

@@ -6,7 +6,6 @@ import React, {
   useRef,
 } from 'react'
 import mergeRefs from 'react-merge-refs'
-import { useButton } from 'react-aria'
 import s from './Button.module.css'
 import { LoadingDots } from '@components/ui'
 
@@ -34,19 +33,8 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
     loading = false,
     disabled = false,
     style = {},
-    ...rest
   } = props
   const ref = useRef<typeof Component>(null)
-  const { buttonProps, isPressed } = useButton(
-    {
-      ...rest,
-      // @ts-ignore onClick === onPress for our purposes
-      onPress: onClick,
-      isDisabled: disabled,
-      elementType: Component,
-    },
-    ref
-  )
 
   const rootClassName = cn(
     s.root,
@@ -63,8 +51,6 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
       aria-pressed={active}
       data-variant={variant}
       ref={mergeRefs([ref, buttonRef])}
-      {...buttonProps}
-      data-active={isPressed ? '' : undefined}
       className={rootClassName}
       disabled={disabled}
       style={{

components/ui/Modal/Modal.tsx

@@ -1,10 +1,13 @@
-import { FC, useRef } from 'react'
-import s from './Modal.module.css'
-import { FocusScope } from '@react-aria/focus'
-import { Transition } from '@headlessui/react'
-import { Cross } from '@components/icons'
-import { useOverlay, OverlayContainer } from '@react-aria/overlays'
+import { FC, useRef, useEffect } from 'react'
 import Portal from '@reach/portal'
+import s from './Modal.module.css'
+import { Cross } from '@components/icons'
+import {
+  disableBodyScroll,
+  enableBodyScroll,
+  clearAllBodyScrollLocks,
+} from 'body-scroll-lock'
+
 interface Props {
   className?: string
   children?: any
@@ -12,48 +15,41 @@ interface Props {
   onClose: () => void
 }
 
-const Modal: FC<Props> = ({ children, open = false, onClose, ...props }) => {
-  let ref = useRef() as React.MutableRefObject<HTMLInputElement>
-  let { overlayProps } = useOverlay(
-    {
-      isOpen: open,
-      isDismissable: false,
-      onClose: onClose,
-      ...props,
-    },
-    ref
-  )
+const Modal: FC<Props> = ({ children, open, onClose }) => {
+  const ref = useRef() as React.MutableRefObject<HTMLDivElement>
+
+  useEffect(() => {
+    if (ref.current) {
+      if (open) {
+        disableBodyScroll(ref.current)
+      } else {
+        enableBodyScroll(ref.current)
+      }
+    }
+    return () => {
+      clearAllBodyScrollLocks()
+    }
+  }, [open])
 
   return (
-    <Transition show={open}>
-      <OverlayContainer>
-        <FocusScope contain restoreFocus autoFocus>
-          <div className={s.root}>
-            <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.modal} {...overlayProps} ref={ref}>
-                <div className="h-7 flex items-center justify-end w-full">
-                  <button
-                    onClick={() => onClose()}
-                    aria-label="Close panel"
-                    className="hover:text-gray-500 transition ease-in-out duration-150 focus:outline-none"
-                  >
-                    <Cross className="h-6 w-6" />
-                  </button>
-                </div>
-                {children}
-              </div>
-            </Transition.Child>
+    <Portal>
+      {open ? (
+        <div className={s.root} ref={ref}>
+          <div className={s.modal}>
+            <div className="h-7 flex items-center justify-end w-full">
+              <button
+                onClick={() => onClose()}
+                aria-label="Close panel"
+                className="hover:text-gray-500 transition ease-in-out duration-150 focus:outline-none"
+              >
+                <Cross className="h-6 w-6" />
+              </button>
+            </div>
+            {children}
           </div>
-        </FocusScope>
-      </OverlayContainer>
-    </Transition>
+        </div>
+      ) : null}
+    </Portal>
   )
 }
 

components/ui/Sidebar/Sidebar.tsx

@@ -1,9 +1,11 @@
-import { FC, useRef } from 'react'
 import s from './Sidebar.module.css'
-import { Transition } from '@headlessui/react'
-import { useOverlay, OverlayContainer } from '@react-aria/overlays'
-import { FocusScope } from '@react-aria/focus'
 import Portal from '@reach/portal'
+import { FC, useEffect, useRef } from 'react'
+import {
+  disableBodyScroll,
+  enableBodyScroll,
+  clearAllBodyScrollLocks,
+} from 'body-scroll-lock'
 
 interface Props {
   children: any
@@ -12,62 +14,40 @@ interface Props {
 }
 
 const Sidebar: FC<Props> = ({ children, open = false, onClose }) => {
-  const ref = useRef<HTMLDivElement>(null)
-  const { overlayProps } = useOverlay(
-    {
-      isOpen: open,
-      isDismissable: true,
-      onClose: onClose,
-    },
-    ref
-  )
+  const ref = useRef() as React.MutableRefObject<HTMLDivElement>
+
+  useEffect(() => {
+    if (ref.current) {
+      if (open) {
+        disableBodyScroll(ref.current)
+      } else {
+        enableBodyScroll(ref.current)
+      }
+    }
+    return () => {
+      clearAllBodyScrollLocks()
+    }
+  }, [open])
 
   return (
     <Portal>
-      <Transition show={open}>
-        <OverlayContainer>
-          <FocusScope contain restoreFocus autoFocus>
-            <div className={s.root}>
-              <div className="absolute inset-0 overflow-hidden">
-                <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="absolute inset-0 bg-black bg-opacity-50 transition-opacity"
-                    // Close the sidebar when clicking on the backdrop
-                    onClick={onClose}
-                  />
-                </Transition.Child>
-                <section
-                  className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16 outline-none"
-                  {...overlayProps}
-                  ref={ref}
-                >
-                  <Transition.Child
-                    enter="transition ease-in-out duration-300 transform"
-                    enterFrom="translate-x-full"
-                    enterTo="translate-x-0"
-                    leave="transition ease-in-out duration-300 transform"
-                    leaveFrom="translate-x-0"
-                    leaveTo="translate-x-full"
-                  >
-                    <div className="h-full md:w-screen md:max-w-md">
-                      <div className="h-full flex flex-col text-base bg-accents-1 shadow-xl overflow-y-auto">
-                        {children}
-                      </div>
-                    </div>
-                  </Transition.Child>
-                </section>
+      {open ? (
+        <div className={s.root} ref={ref}>
+          <div className="absolute inset-0 overflow-hidden">
+            <div
+              className="absolute inset-0 bg-black bg-opacity-50 transition-opacity"
+              onClick={onClose}
+            />
+            <section className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16 outline-none">
+              <div className="h-full md:w-screen md:max-w-md">
+                <div className="h-full flex flex-col text-base bg-accents-1 shadow-xl overflow-y-auto">
+                  {children}
+                </div>
               </div>
-            </div>
-          </FocusScope>
-        </OverlayContainer>
-      </Transition>
+            </section>
+          </div>
+        </div>
+      ) : null}
     </Portal>
   )
 }

components/ui/Toast/Toast.module.css

@@ -1,9 +0,0 @@
-.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

@@ -1,73 +0,0 @@
-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

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

components/ui/context.tsx

@@ -1,6 +1,5 @@
 import React, { FC, useMemo } from 'react'
 import { ThemeProvider } from 'next-themes'
-import { SSRProvider, OverlayProvider } from 'react-aria'
 
 export interface State {
   displaySidebar: boolean
@@ -181,10 +180,6 @@ export const useUI = () => {
 
 export const ManagedUIContext: FC = ({ children }) => (
   <UIProvider>
-    <ThemeProvider>
-      <SSRProvider>
-        <OverlayProvider>{children}</OverlayProvider>
-      </SSRProvider>
-    </ThemeProvider>
+    <ThemeProvider>{children}</ThemeProvider>
   </UIProvider>
 )

components/ui/index.ts

@@ -10,4 +10,3 @@ 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'