feat: use radix

Light-it-labs · Nov 16, 2023 · 9eae5ac · 9eae5ac
1 parent e80f801
commit 9eae5ac
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 147 deletions.
diff --git a/cspell.json b/cspell.json
@@ -27,7 +27,6 @@
     "fieldsets",
     "filesize",
     "Flugg",
-    "headlessui",
     "heroicons",
     "ianvs",
     "larastan",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -43,7 +43,6 @@
     "vite-plugin-checker": "^0.6.0"
   },
   "dependencies": {
-    "@headlessui/react": "^1.7.17",
     "@heroicons/react": "^2.0.18",
     "@hookform/resolvers": "^3.3.2",
     "@radix-ui/react-dialog": "^1.0.5",

diff --git a/resources/js/layout/Navbar/ResponsiveSidebar.tsx b/resources/js/layout/Navbar/ResponsiveSidebar.tsx
@@ -1,5 +1,5 @@
-import { Fragment, useState } from "react";
-import { Dialog, Transition } from "@headlessui/react";
+import { useState } from "react";
+import * as Dialog from "@radix-ui/react-dialog";
 
 import { icons } from "@/ui";
 import { Sidebar } from "./Sidebar";
@@ -8,65 +8,18 @@ export const ResponsiveSidebar = () => {
   const [sidebarOpen, setSidebarOpen] = useState(false);
   return (
     <>
-      <Transition.Root show={sidebarOpen} as={Fragment}>
-        <Dialog
-          as="div"
-          className="relative z-50 xl:hidden"
-          onClose={setSidebarOpen}
-        >
-          <Transition.Child
-            as={Fragment}
-            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="fixed inset-0 bg-gray-900/80" />
-          </Transition.Child>
-
-          <div className="fixed inset-0 flex">
-            <Transition.Child
-              as={Fragment}
-              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"
-            >
-              <Dialog.Panel className="relative mr-16 flex w-full max-w-xs flex-1">
-                <Transition.Child
-                  as={Fragment}
-                  enter="ease-in-out duration-300"
-                  enterFrom="opacity-0"
-                  enterTo="opacity-100"
-                  leave="ease-in-out duration-300"
-                  leaveFrom="opacity-100"
-                  leaveTo="opacity-0"
-                >
-                  <div className="absolute left-full top-0 flex w-16 justify-center pt-5">
-                    <button
-                      type="button"
-                      className="-m-2.5 p-2.5"
-                      onClick={() => setSidebarOpen(false)}
-                    >
-                      <span className="sr-only">Close sidebar</span>
-                      <icons.XMarkIcon
-                        className="h-6 w-6 text-white"
-                        aria-hidden="true"
-                      />
-                    </button>
-                  </div>
-                </Transition.Child>
-
-                <Sidebar />
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </Dialog>
-      </Transition.Root>
+      <Dialog.Root open={sidebarOpen} onOpenChange={setSidebarOpen}>
+        <Dialog.Portal>
+          <Dialog.Overlay className="fixed inset-0 bg-gray-800/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
+          <Dialog.Content className="fixed inset-y-0 left-0 z-50 h-full w-1/2 gap-4 border-r border-gray-700 bg-black shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm">
+            <Sidebar onCloseSidebar={() => setSidebarOpen(false)} />
+            <Dialog.Close className="absolute right-8 top-8 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:pointer-events-none">
+              <icons.XMarkIcon className="h-4 w-4 stroke-[4] text-gray-500" />
+              <span className="sr-only">Close</span>
+            </Dialog.Close>
+          </Dialog.Content>
+        </Dialog.Portal>
+      </Dialog.Root>
 
       <div className="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-6 border-b border-white/5 bg-gray-900 px-4 shadow-sm sm:px-6 md:hidden lg:px-8">
         <button

diff --git a/resources/js/ui/common/Toast/ToastMessage.tsx b/resources/js/ui/common/Toast/ToastMessage.tsx
@@ -1,7 +1,6 @@
-import { Fragment } from "react";
-import { Transition } from "@headlessui/react";
 import { XMarkIcon } from "@heroicons/react/20/solid";
 
+import { tw } from "@/utils";
 import toastIcons from "./toastIcons";
 import type { Toast } from "./toastStore";
 
@@ -12,57 +11,47 @@ export interface ToastMessageProps {
 
 export const ToastMessage = ({ toast, onClose }: ToastMessageProps) => {
   return (
-    <Transition
-      show={toast.state === "open"}
-      appear
-      as={Fragment}
-      enter="transform ease-out duration-300 transition"
-      enterFrom="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
-      enterTo="translate-y-0 opacity-100 sm:translate-x-0"
-      leave="transition-all ease-in duration-500"
-      leaveFrom="opacity-100 max-h-52"
-      leaveTo="opacity-0 [&:not(:last-child)]:max-h-0"
+    <div
+      onClick={onClose}
+      onKeyUp={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          onClose();
+        }
+      }}
+      role="button"
+      tabIndex={0}
+      className={tw(
+        "pointer-events-auto z-50 w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5",
+        toast.state === "open" && "duration-300 animate-in slide-in-from-right",
+        toast.state === "isClosing" && "duration-500 animate-out fade-out-0",
+      )}
     >
-      <div
-        onClick={onClose}
-        onKeyUp={(e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            onClose();
-          }
-        }}
-        role="button"
-        tabIndex={0}
-        className="pointer-events-auto z-50 w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5"
-      >
-        <div className="p-4">
-          <div className="flex items-start">
-            <div className="flex-shrink-0">
-              {toast.icon ? toast.icon : toastIcons[toast.type]}
-            </div>
+      <div className="p-4">
+        <div className="flex items-start">
+          <div className="flex-shrink-0">
+            {toast.icon ? toast.icon : toastIcons[toast.type]}
+          </div>
 
-            <div className="ml-3 flex w-0 flex-1 flex-col gap-1 pt-0.5">
-              {toast.title && (
-                <p className="text-sm font-medium text-gray-900">
-                  {toast.title}
-                </p>
-              )}
-              {toast.message && (
-                <p className="text-sm text-gray-500">{toast.message}</p>
-              )}
-            </div>
-            <div className="ml-4 flex flex-shrink-0">
-              <button
-                type="button"
-                className="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                onClick={onClose}
-              >
-                <span className="sr-only">Close</span>
-                <XMarkIcon className="h-5 w-5" aria-hidden="true" />
-              </button>
-            </div>
+          <div className="ml-3 flex w-0 flex-1 flex-col gap-1 pt-0.5">
+            {toast.title && (
+              <p className="text-sm font-medium text-gray-900">{toast.title}</p>
+            )}
+            {toast.message && (
+              <p className="text-sm text-gray-500">{toast.message}</p>
+            )}
+          </div>
+          <div className="ml-4 flex flex-shrink-0">
+            <button
+              type="button"
+              className="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+              onClick={onClose}
+            >
+              <span className="sr-only">Close</span>
+              <XMarkIcon className="h-5 w-5" aria-hidden="true" />
+            </button>
           </div>
         </div>
       </div>
-    </Transition>
+    </div>
   );
 };
diff --git a/resources/js/ui/common/Toast/toastStore.ts b/resources/js/ui/common/Toast/toastStore.ts
@@ -63,7 +63,7 @@ export const useToastStore = create<ToastStore>((set, get) => ({
       return state;
     });
 
-    await asyncTimeout(600);
+    await asyncTimeout(500);
 
     set((state) => ({
       toasts: state.toasts.filter((toast) => toast.id !== id),