Merge branch 'main' into max-duration

yanxg · Dec 28, 2023 · 59ea8a1 · 59ea8a1
2 parents b391e90 + 16b564c
commit 59ea8a1
Show file tree

Hide file tree

Showing 6 changed files with 184 additions and 105 deletions.
diff --git a/apps/web/ui/modals/add-edit-domain-modal.tsx b/apps/web/ui/modals/add-edit-domain-modal.tsx
@@ -293,7 +293,6 @@ function AddEditDomainModal({
                   }}
                 />
               }
-              fullWidth
             >
               <div className="mt-1 w-full cursor-not-allowed rounded-md border border-gray-300 px-3 py-2 text-left text-sm text-gray-300 sm:max-w-md">
                 https://yourdomain.com

diff --git a/apps/web/ui/modals/provider.tsx b/apps/web/ui/modals/provider.tsx
@@ -22,6 +22,7 @@ import { useCookies } from "@dub/ui";
 import { SimpleLinkProps } from "@/lib/types";
 import { toast } from "sonner";
 import { useImportRebrandlyModal } from "./import-rebrandly-modal";
+import { TooltipProvider } from "@dub/ui/src/tooltip";
 
 export const ModalContext = createContext<{
   setShowAddProjectModal: Dispatch<SetStateAction<boolean>>;
@@ -59,7 +60,6 @@ export default function ModalProvider({ children }: { children: ReactNode }) {
     useImportRebrandlyModal();
 
   const params = useParams() as { slug?: string };
-  const { slug } = params;
 
   const [hashes, setHashes] = useCookies<SimpleLinkProps[]>("hashes__dub", [], {
     domain: !!process.env.NEXT_PUBLIC_VERCEL_URL ? ".dub.co" : undefined,
@@ -97,28 +97,30 @@ export default function ModalProvider({ children }: { children: ReactNode }) {
   }, [error]);
 
   return (
-    <ModalContext.Provider
-      value={{
-        setShowAddProjectModal,
-        setShowCompleteSetupModal,
-        setShowAddEditDomainModal,
-        setShowAddEditLinkModal,
-        setShowUpgradePlanModal,
-        setShowImportBitlyModal,
-        setShowImportShortModal,
-        setShowImportRebrandlyModal,
-      }}
-    >
-      <AddProjectModal />
-      <AcceptInviteModal />
-      <CompleteSetupModal />
-      <AddEditDomainModal />
-      <AddEditLinkModal />
-      <UpgradePlanModal />
-      <ImportBitlyModal />
-      <ImportShortModal />
-      <ImportRebrandlyModal />
-      {children}
-    </ModalContext.Provider>
+    <TooltipProvider>
+      <ModalContext.Provider
+        value={{
+          setShowAddProjectModal,
+          setShowCompleteSetupModal,
+          setShowAddEditDomainModal,
+          setShowAddEditLinkModal,
+          setShowUpgradePlanModal,
+          setShowImportBitlyModal,
+          setShowImportShortModal,
+          setShowImportRebrandlyModal,
+        }}
+      >
+        <AddProjectModal />
+        <AcceptInviteModal />
+        <CompleteSetupModal />
+        <AddEditDomainModal />
+        <AddEditLinkModal />
+        <UpgradePlanModal />
+        <ImportBitlyModal />
+        <ImportShortModal />
+        <ImportRebrandlyModal />
+        {children}
+      </ModalContext.Provider>
+    </TooltipProvider>
   );
 }
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@dub/ui",
   "description": "UI components for Dub.co",
-  "version": "0.0.37",
+  "version": "0.0.40",
   "sideEffects": false,
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -47,7 +47,7 @@
     "sonner": "^0.5.0",
     "swr": "^2.1.5",
     "use-debounce": "^8.0.4",
-    "vaul": "^0.6.8"
+    "vaul": "^0.8.0"
   },
   "author": "Steven Tey <[email protected]>",
   "homepage": "https://dub.co",

diff --git a/packages/ui/src/button.tsx b/packages/ui/src/button.tsx
@@ -23,7 +23,7 @@ export function Button({
 }: ButtonProps) {
   if (disabledTooltip) {
     return (
-      <Tooltip content={disabledTooltip} fullWidth>
+      <Tooltip content={disabledTooltip}>
         <div className="flex h-10 w-full cursor-not-allowed items-center justify-center rounded-md border border-gray-200 bg-gray-100 px-4 text-sm text-gray-400 transition-all focus:outline-none">
           <p>{text}</p>
         </div>

diff --git a/packages/ui/src/tooltip.tsx b/packages/ui/src/tooltip.tsx
@@ -4,80 +4,56 @@ import { nFormatter, timeAgo } from "@dub/utils";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { HelpCircle } from "lucide-react";
 import Link from "next/link";
-import { ReactNode } from "react";
-import { Drawer } from "vaul";
-import { useMediaQuery } from "./hooks";
+import { ReactNode, useState } from "react";
+
+export function TooltipProvider({ children }: { children: ReactNode }) {
+  return (
+    <TooltipPrimitive.Provider delayDuration={0}>
+      {children}
+    </TooltipPrimitive.Provider>
+  );
+}
 
 export function Tooltip({
   children,
   content,
   side = "top",
-  desktopOnly,
-  fullWidth,
 }: {
   children: ReactNode;
   content: ReactNode | string;
   side?: "top" | "bottom" | "left" | "right";
-  desktopOnly?: boolean;
-  fullWidth?: boolean;
 }) {
-  const { isMobile } = useMediaQuery();
+  const [open, setOpen] = useState(false);
 
-  if (isMobile && !desktopOnly) {
-    return (
-      <Drawer.Root>
-        <Drawer.Trigger
-          className={`${fullWidth ? "w-full" : "inline-flex"} md:hidden`}
-          onClick={(e) => {
-            e.stopPropagation();
-          }}
-        >
-          {children}
-        </Drawer.Trigger>
-        <Drawer.Overlay className="fixed inset-0 z-40 bg-gray-100 bg-opacity-10 backdrop-blur" />
-        <Drawer.Portal>
-          <Drawer.Content className="fixed bottom-0 left-0 right-0 z-50 mt-24 rounded-t-[10px] border-t border-gray-200 bg-white">
-            <div className="sticky top-0 z-20 flex w-full items-center justify-center rounded-t-[10px] bg-inherit">
-              <div className="my-3 h-1 w-12 rounded-full bg-gray-300" />
-            </div>
-            <div className="flex min-h-[150px] w-full items-center justify-center overflow-hidden bg-white align-middle shadow-xl">
-              {typeof content === "string" ? (
-                <span className="block text-center text-sm text-gray-700">
-                  {content}
-                </span>
-              ) : (
-                content
-              )}
-            </div>
-          </Drawer.Content>
-          <Drawer.Overlay />
-        </Drawer.Portal>
-      </Drawer.Root>
-    );
-  }
   return (
-    <TooltipPrimitive.Provider delayDuration={100}>
-      <TooltipPrimitive.Root>
-        <TooltipPrimitive.Trigger className="md:inline-flex" asChild>
-          {children}
-        </TooltipPrimitive.Trigger>
-        <TooltipPrimitive.Portal>
-          <TooltipPrimitive.Content
-            sideOffset={8}
-            side={side}
-            className="animate-slide-up-fade z-[99] items-center overflow-hidden rounded-md border border-gray-200 bg-white shadow-md md:block"
-          >
-            {typeof content === "string" ? (
-              <span className="block max-w-xs px-4 py-2 text-center text-sm text-gray-700">
-                {content}
-              </span>
-            ) : (
-              content
-            )}
-          </TooltipPrimitive.Content>
-        </TooltipPrimitive.Portal>
-      </TooltipPrimitive.Root>
-    </TooltipPrimitive.Provider>
+    <TooltipPrimitive.Root open={open} onOpenChange={setOpen}>
+      <TooltipPrimitive.Trigger
+        asChild
+        onClick={() => {
+          setOpen(true);
+        }}
+        onBlur={() => {
+          setOpen(false);
+        }}
+      >
+        {children}
+      </TooltipPrimitive.Trigger>
+      <TooltipPrimitive.Portal>
+        <TooltipPrimitive.Content
+          sideOffset={8}
+          side={side}
+          className="animate-slide-up-fade z-[99] items-center overflow-hidden rounded-md border border-gray-200 bg-white shadow-md"
+        >
+          {typeof content === "string" ? (
+            <span className="block max-w-xs px-4 py-2 text-center text-sm text-gray-700">
+              {content}
+            </span>
+          ) : (
+            content
+          )}
+        </TooltipPrimitive.Content>
+      </TooltipPrimitive.Portal>
+    </TooltipPrimitive.Root>
   );
 }
 
@@ -95,7 +71,7 @@ export function TooltipContent({
   onClick?: () => void;
 }) {
   return (
-    <div className="flex flex-col items-center space-y-3 p-4 text-center md:max-w-xs">
+    <div className="flex max-w-xs flex-col items-center space-y-3 p-4 text-center">
       <p className="text-sm text-gray-700">{title}</p>
       {cta &&
         (href ? (
-Original file line number
+Diff line change
@@ Expand Up / @@ -293,7 +293,6 @@ function AddEditDomainModal({ @@
                       }}
                     />
                   }
-                  fullWidth
                 >
                   <div className="mt-1 w-full cursor-not-allowed rounded-md border border-gray-300 px-3 py-2 text-left text-sm text-gray-300 sm:max-w-md">
                     https://yourdomain.com
@@ Expand Down @@